Bootstrap：浮动 div 会导致父元素折叠。构造嵌套列的最佳方法？

Question

在 Bootstrap 处理 div 的方式上，我真的很苦恼。

在我看来，所有使用 Bootstrap CSS 的列分类 div 都是浮动的。例如：

<div class="col-md-3">
   property
</div>

上面这个 div 的样式是：float: left;，在 Bootstrap CSS 中定义。

现在每个人都知道浮动的问题了，它会导致父 div 无法扩展到高度，因为它没有“看到”浮动元素推出容器。

我觉得这是 Bootstrap 的一个严重缺陷。我有一些类可以为 div 添加边距，例如：

.full-buffer{margin:20px 0}

如果我想在包含多个 Bootstrap 列的 div 上使用此类，则它不起作用。因为 div 没有高度。如果我想添加背景颜色，它不会显示出来。例如：

.background-coloured-div{background-color:#0F0;}

 <div class="background-coloured-div">
                <div class="col-md-3">
                    property
                </div>
                <div class="col-md-3">
                    property
                </div>
                <div class="col-md-3">
                    property
                </div>
                <div class="col-md-3">
                    property
                </div>
            </div>

上面不会显示任何背景颜色，因为里面的所有div都是浮动的，所以它会折叠到0px的高度。

JSFiddle without bootstrap

JSFiddle with bootstrap - 解决一个问题并导致另一个问题

那么，使用 Bootstrap 列的正确方法是什么？如果一切都是浮动的，如何为父 div 添加适当的边距、背景颜色等？ 这不是整个系统的巨大缺陷吗？

Answer 1

Bootstrap 有一个 row 类，其中包含使用的浮点数：

.row:before {
    display: table;
    content: " ";
}

.background-coloured-div {
  background-color: #0F0;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="background-coloured-div row">
  <div class="col-md-3">
    property
  </div>
  <div class="col-md-3">
    property
  </div>
  <div class="col-md-3">
    property
  </div>
  <div class="col-md-3">
    property
  </div>
</div>

Answer 2

您需要将这些列包装在 .row div 中以包含浮点数。

不要忘记在 .container 或 .container-fluid 中也包含该行，以平衡应用于 .row 的 -15px 边距。

<div class="container-fluid">
    <div class="background-coloured-div row">
      <div class="col-md-3">
        property
      </div>
      <div class="col-md-3">
        property
      </div>
      <div class="col-md-3">
        property
      </div>
      <div class="col-md-3">
        property
      </div>
    </div>
</div>

http://getbootstrap.com/css/#grid-example-fluid

如果出于某种原因您不想使用 .row，您可以将以下内容添加到您的 css 以包含该 div 子项的浮动，但我建议使用 Bootstraps 解决方案：

background-coloured-div:after {
   content:'';
   display:table;
   clear:both;
}

Answer 3

1. 行必须放置在 .container（固定宽度）或 .container-fluid（全角）用于正确对齐和填充。
2. 使用行来创建水平列组。
3. 内容应放置在列中，并且只能放置在列中 行的直接子代。

在你的情况下，代码应该是：

<div class="container-fluid">
  <div class="row background-coloured-div">
    <div class="col-md-3">
      property
    </div>
    <div class="col-md-3">
      property
    </div>
    <div class="col-md-3">
      property
    </div>
    <div class="col-md-3">
      property
    </div>
  </div>
</div>