html - div 垂直对齐的问题(Twitter Bootstrap 3)

Question

我读过很多相同的主题，但他们的解决方案对我没有帮助。 我有标题，首先是 Logo 和正确位置的两个按钮。问题是这些按钮位于顶部。我需要将它们沿水平线放置。

用 % 给他们 top-margin 规则解决了这个问题，但随后又出现了另一个问题。通过调整浏览器窗口大小的 top-margin 规则，在 Logo 和按钮之间提供了非常大的空间。

所以我正在寻找真正的 Bootstrap 解决方案:) 也许我的 header 标记不正确？

<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: 重写了 live 版本的标题，但还是不行

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>