行下的bootstrap全宽元素高度

Question

我需要一个元素来占据整个屏幕的宽度。

因此，我将其置于.row之下，因为.container添加了15 px填充，然后.row将其带回全宽。

.container-fluid
  .row
    header  
      .col-xs-12
        "content content content"

但是当我检查标题元素时，它的高度为0.

如果不对像素值进行硬编码或使用javascript，如何让它自动成为.col-xs-12内容的高度？

Answer 1

所以有一些事情：

首先，根据Bootstrap's docs，＆＃34;只有列可能是行的直接子项。＆＃34;如果要添加标题元素，请将其设置为.row或.container的父元素，或将其放在.col-xs-12中。

所有.col-xx-xx div都向左浮动，所以它们从技术上被取出页面流，这就是你的标题元素没有高度的原因 - 浏览器没有看到它的内容影响流程页面，所以它不相信它有一个高度。使用Bootstrap，您可以添加.clearfix类来修复此问题，但我建议您先确保先清理Bootstrap布局。

编辑： 另外（我想这应该不用说了，但是因为你的代码很稀疏 - 而且haml？ - 我想确保它是真的），如果你的.col-xs-12没有但是，由于在.col-xx-xx div上没有设置最小高度，因此您不会有高度。

<div class="container-fluid">
      <div class="header">
           <div class="row">
                <div class="col-xs-12">
                     CONTENT HERE
                </div>
           </div>
      </div>
 </div>

我希望这有帮助！