css - 行下 Bootstrap 全宽元素高度

Question

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

因此，我像这样把它放在 .row 下，因为 .container 添加了 15 像素的填充，然后 .row 把它拿走了再次全宽。

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

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

如何在不对像素值进行硬编码或使用 javascript 的情况下使其自动成为 .col-xs-12 内容的高度？

Answer 1

有几件事:

首先，根据 Bootstrap's docs , "只有列可以是行的直接子项。"如果您要添加 header 元素，请将其作为 .row 或 .container 的父元素，或将其放在 .col-xs-12 中。

所有 .col-xx-xx div 都向左浮动，因此从技术上讲它们被排除在页面流之外，这就是为什么您的 header 元素没有高度——浏览器不会将其内容视为影响页面流的原因页面，所以它不相信它有高度。使用 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>

希望对您有所帮助!