Question

在bootstrap 3中布置流体柱布局时遇到问题。

HTML元素的结构如下所示：

div.container-fluid
  div.row.upperrow
  div.row.contentrow
    div.col-lg-3
    div.col-lg-1
    div.col-lg-5
    div.col-lg-3

即使是前3个div，它们只占12列布局的9/12，也比页面宽得多。 div.col-lg-5很容易占据行的70％（不是5/12）。 div.col-lg-3被推到前3个div之下，因为它们太宽了。

这可能是什么问题？

Answer 1

如http://getbootstrap.com/css/所述：

内容应放在列中，只有列可能是行的直接子项。

您的布局在另一行中有一行作为子项。将另一个col-12置于其间或删除一行。

Answer 2

看看this fiddle。这是它的工作原理。

<div class="container-fluid">
    <div class="row">
        <p class="text-center">Here is a row</p>
    </div><br/>
    <div class="row">
        <div class="col-3 col-sm-3 col-lg-3 col">Col 3</div>
        <div class="col-2 col-sm-1 col-lg-2 col">Col 2</div>
        <div class="col-4 col-sm-5 col-lg-4 col">Col 4</div>
        <div class="col-3 col-sm-3 col-lg-3 col">Col 3</div>
    </div>
</diV>

Bootstrap 3流体网格问题

2 个答案: