css - Bootstrap : Floated divs cause parent elements to collapse. 构建嵌套列的最佳方式？

Question

关于 Bootstrap 处理 div 的方式，我真的很纠结。

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

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

上面的 div 具有样式:float: left;，如 Bootstrap CSS 中所定义。

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

我觉得这是 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 都是 float 的，所以它会折叠到 0px 高度。

JSFiddle without bootstrap

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

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

Answer 1

Bootstrap 有一个包含 float 的 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>