Question

我读过许多相同的主题，但他们的解决方案并没有帮助我。我的头部首先是徽标，两个按钮位于正确的位置。问题是那些按钮放在顶部。我需要将它们放在水平线上。

用％来给他们带来最高利润率的规则解决了问题，但接着又出现了问题。使用顶级边距规则调整浏览器窗口大小可以在徽标和按钮之间留出很大的空间。

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

<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

与div垂直对齐的麻烦（Twitter Bootstrap 3）

2 个答案: