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时{} 1}}。

Answer 1

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

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

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

<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 2

由于漂浮的孩子，行的高度可能会崩溃？尝试添加clearfix以清除其子项的浮动行：

<div class="row clearfix">

我不完全确定没有看到任何可能导致问题的CSS，但上述内容可能会解决问题。仅供参考 - clearfix类附带BootStrap。

以下是关于clearfix的详细阅读和其他信息：What is a clearfix?

Answer 3

我正在尝试复制引导程序的列，并且我还想知道为什么我的行的高度为0。事实证明display: table;，content: " ";和clear: both;对行的高度都非常重要高度。

我希望这对某人有帮助。

Bootstrap 3：嵌套行的高度为0

3 个答案: