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

Question

我正在为 Bootstrap 网格布局的“简单”任务而苦苦挣扎。我希望在大视口(viewport)上有 4 列，然后在中型设备上有 2 列，最后在较小的设备上只有 1 列。

当我测试我的代码片段时，似乎我的视口(viewport)宽度在 992px -> 1199px 之间存在布局问题。

标题 3 未正确对齐。

这是代码笔链接: 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