div垂直对齐的问题( 3)

Question

我读过许多相同的话题，但他们的解决方案对我没有帮助。我有标题，首先来的标志和两个按钮在正确的位置。问题是这些按钮是放在顶部的。我得把它们放在水平线上。

给他们%的最高利润规则解决了问题，但随后又出现了另一个问题。通过调整浏览器窗口的上限规则，在徽标和按钮之间提供了很大的空间。

因此，我正在寻找真正的引导解决方案:)也许我的标题的标记不正确？

<div id="header" class="row">
<div class="col-md-6 col-md-push-1">
    <div class="moduletable">               
        <div class="custom">
            <p><img class="img-responsive" src="/images/logo_ru/logo.png" alt="Школа Успешного Общения" /></p>
        </div>
    </div>
</div>

<div class="col-md-6 btn-group col-md-push-1">
    <div class="col-md-3 col-md-push-1">        
        <div class="moduletable_consultation">
            <div class="custom_consultation"  >
                <p><em>Бесплатная консультация</em></p>
                <div class="row">
                    <div class="btn-group">
                        <div class="col-md-12">
                            <a class="btn btn-warning btn-lg" href="/component/chronoforms5/?chronoform=Anketa-v5">ЗАПИСАТЬСЯ</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-3 col-md-push-1">
        <div class="moduletable">                   
            <div class="custom"  >
                <div class="social_buttons_box">
                    <div class="btn-group">
                        <a class="btn btn-warning btn-lg" href="#">О Нас</a>
                    </div>

                    <div class="social_b_header">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="none"data-yashareQuickServices="vkontakte,facebook,twitter,odnoklassniki"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

​

等着求救！

下面是现场演示：http://www.kuzma.tk

这是JsFiddle：http://jsfiddle.net/DTcHh/154/

编辑:我在标记中使用占位符(Joomla)。为方便起见：

<div id="header" class="row">
<div class="col-md-6 col-md-push-1">
    <jdoc:include type="modules" name="header-2" style="xhtml" />
</div>

<div class="col-md-6 btn-group col-md-push-1">
    <div class="col-md-3 col-md-push-1"><jdoc:include type="modules" name="header-4" style="xhtml" /></div>
    <div class="col-md-3 col-md-push-1"><jdoc:include type="modules" name="header-3" style="xhtml" /></div>
</div>

​

Edit2:活动版本的标题已经重写，但仍然没有成功

Answer 1

经过这么长时间，我终于找到了解决办法。但它缺乏两个特点:不对齐图片，不给可能实现更微妙的垂直高度的对齐。http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height

Answer 2

也许这会有帮助

<div id="header" class="row">
<div class="col-md-6 col-md-push-1">
    <div class="moduletable">               
        <div class="custom">
            <p><img class="img-responsive" src="/images/logo_ru/logo.png" alt="Школа Успешного Общения" /></p>
        </div>
    </div>
</div>

<div class="col-md-6">
    <div class="col-md-3">        
        <div class="moduletable_consultation">
            <div class="custom_consultation"  >

                <div class="row">
                  <div class='col-md-1'>
                  <p><em>Бесплатная консультация</em></p>
                  </div>
                       <div class='col-md-2 col-md-offset-6'>
                            <a class="btn btn-warning btn-lg" href="/component/chronoforms5/?chronoform=Anketa-v5">ЗАПИСАТЬСЯ</a>
                  </div>

                </div>
            </div>
        </div>
    </div>

    <div class="col-md-3">
        <div class="moduletable">                   
            <div class="custom"  >
                <div class="social_buttons_box">
                    <div class="btn-group col-md-offset-12">
                        <a class="btn btn-warning btn-lg" href="#">О Нас</a>
                    </div>

                    <div class="social_b_header">
                        <div class="row">
                            <div class="col-md-2 ">
                                <div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="none"data-yashareQuickServices="vkontakte,facebook,twitter,odnoklassniki"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>