div 垂直对齐的问题(Twitter Bootstrap 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 CMS）。只是为了方便起见：

<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

也许这会有所帮助

<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>

Answer 2

经过这么长时间，我终于找到了解决方案。只是它缺少两个功能：不对齐图片，不提供实现更微妙的垂直高度对齐的可能性。http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height