Question

我正在努力完成一个带有引导网格布局的“简单”任务。我想在大视口上有4列，然后在中等上有2列，在较小的设备上只有1列。

当我测试我的代码片段时，看起来我的视口布局问题是992px - ＆gt; 1199像素宽。

标题3未正确对齐。

这是codepen链接： http://codepen.io/ocleyman/pen/raXbxE

这是html代码段：

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6 col-lg-3" style="background:pink;">
      <h3>TITLE 1</h3>
      <p>Lorem ipsum dolor sit amet, et assum efficiantur his, tota postea moderatius ei eos. Eam quis percipitur sadipscing cu. Sale liberavisse ius te, laudem disputando has no. Eos platonem assentior ut, ea iudicabit gubergren evertitur ius, eum nobis definitionem ea. Vix eu quot quaerendum efficiantur.</p>
</div>
<div class="col-md-6 col-lg-3" style="background:red;">
    <h3>TITLE 2</h3>
    <p>Et inermis copiosae cum. Illum delectus voluptaria his ne. Habeo saepe tantas sed no. Ei duo solum pertinax. Ludus aliquid honestatis et pri. Est habeo singulis hendrerit cu, graeco scriptorem theophrastus est ne. Mea audire interpretaris an.</p>
</div>
<div class="col-md-6 col-lg-3"  style="background:yellow;">
    <h3>TITLE 3</h3>
    <p>Odio denique conclusionemque eum et. Pro quodsi expetendis adipiscing ad, vim posse nominati id. Et laboramus assentior quo. Idque dicant verear pri te, vim ad simul dolores, iusto constituto per eu.</p>
</div>
<div class="col-md-6 col-lg-3" style="background:green;">
    <h3>TITLE 4</h3>
    <p>Mei menandri definiebas ad, aeque omnes posidonium ut ius, ut modo justo intellegebat mel. Hinc lucilius detraxit eos at. Hinc inimicus volutpat at his. Ius ornatus convenire honestatis at, ei wisi ceteros pro. Timeam aliquam mea no, ad autem semper vis. An invenire voluptaria eam.</p>
</div>

有什么建议吗？

Answer 1

我认为您需要使用嵌套行：

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-6 col-md-12">
            <div class="row">
                <div class="col-md-6" style="background:pink;">
                    <h3>TITLE 1</h3>
                    <p>Lorem ipsum dolor sit amet, et assum efficiantur his, tota postea moderatius ei eos. Eam quis percipitur sadipscing cu. Sale liberavisse ius te, laudem disputando has no. Eos platonem assentior ut, ea iudicabit gubergren evertitur ius, eum nobis definitionem ea. Vix eu quot quaerendum efficiantur.</p>
                </div>
                <div class="col-md-6" style="background:red;">
                    <h3>TITLE 2</h3>
                    <p>Et inermis copiosae cum. Illum delectus voluptaria his ne. Habeo saepe tantas sed no. Ei duo solum pertinax. Ludus aliquid honestatis et pri. Est habeo singulis hendrerit cu, graeco scriptorem theophrastus est ne. Mea audire interpretaris an.</p>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-md-12">
            <div class="row">
                <div class="col-md-6"  style="background:yellow;">
                    <h3>TITLE 3</h3>
                    <p>Odio denique conclusionemque eum et. Pro quodsi expetendis adipiscing ad, vim posse nominati id. Et laboramus assentior quo. Idque dicant verear pri te, vim ad simul dolores, iusto constituto per eu.</p>
                </div>
                <div class="col-md-6" style="background:green;">
                    <h3>TITLE 4</h3>
                    <p>Mei menandri definiebas ad, aeque omnes posidonium ut ius, ut modo justo intellegebat mel. Hinc lucilius detraxit eos at. Hinc inimicus volutpat at his. Ius ornatus convenire honestatis at, ei wisi ceteros pro. Timeam aliquam mea no, ad autem semper vis. An invenire voluptaria eam.</p>
                </div>
            </div>
        </div>
    </div>
</div>

http://codepen.io/anon/pen/qEewPa

Answer 2

这是因为盒子的高度不同。当盒子浮动时，它们将占用可用空间。

将它们全部设置为相同的高度将允许框正确对齐（见下文）。

enter image description here

BOOTSTRAP网格| 4列> 2列> 1列

2 个答案: