Bootstrap 3：嵌套行的高度为 0

Question

我的标记：

<div class="container">
  <div class="row">
    <div class="col-xs-12"></div>    
    <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-12">
      <div class="row"> <!-- this has 0 height -->
        <div class="col-xs-6"></div>
        <div class="col-xs-6"></div>
      </div>
    </div>    
    <div class="col-xs-12"></div>
  </div>
</div>

嵌套行具有正确的宽度、0 高度并且不能有 margin-bottom 的原因可能是什么，无论它的列是什么？

有趣的是，当我为该行绝对定位一个伪元素 ::after 时，它会正确解析像 top: 50% 这样的大小，但前提是有问题的行具有 position: static 而不是当它具有position: relative.

Answer 1

该行的高度可能会因其浮动的子项而折叠？尝试添加一个 clearfix 来清除其子级浮动的行：

<div class="row clearfix">

如果没有看到您自己的 CSS 也可能导致问题，我不能完全确定，但以上可能会解决问题。仅供参考 - clearfix class 附带 BootStrap.

这里有一本关于 clearfix 的好书和其他信息：What is a clearfix?

Answer 2

我重现了问题：http://jsfiddle.net/phn3Lae6/1

当您从 ::after 伪元素中删除 position: absolute 时，行行为正常。

因为 ::before 和 ::after 伪元素是 Bootstrap 网格的重要组成部分，这里最好的解决方案可能是不要乱用它们，而是在网格元素内创建一个单独的元素来是伪元素父级，例如：

<div class="row">
  <div class="pseudoelement-parent">
    <div class="col-xs-6"></div>
    <div class="col-xs-6"></div>
  </div>
</div>

.pseudoelement-parent {
  position: relative;
}

Answer 3

我正在尝试复制 bootstrap 的列，我也想知道为什么我的行高为 0。结果是 display: table;、content: " "; 和 clear: both; 对行的高度都很重要。

我希望这对某人有所帮助。

Bootstrap 3：嵌套行的高度为 0

Bootstrap 3: nested row has 0 height

html

css

grid-layout

twitter-bootstrap