html - Bootstrap 3 嵌套 col 不采用父样式

Question

为什么嵌套的 col 不采用父 div 的样式？这是背景应为蓝色的示例:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div style="background-color: blue;">
      <div class="col-xs-12">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </div>
    </div>
  </div>
</div>

为了让它工作，我们必须为父 div 指定一个高度，但我希望我的 div 的高度响应性地与我的 col 的高度相同。

谢谢

Answer 1

这是因为“Collapsing Parent”或“Great Collapse”问题，您可以在这里得到很好的了解:https://css-tricks.com/all-about-floats/

基本上，如果这个父元素只包含 float 元素，它的高度就会消失。

由于您使用的是 Bootstrap ，因此您可以使用其中已经包含的 clearfix 类并将其应用于该父 div，如下所示:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="clearfix" style="background-color: blue;">
      <div class="col-xs-12">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </div>
    </div>
  </div>
</div>

有关 clearfix checkout bootstrap 文档的更多信息，请点击此处:https://getbootstrap.com/docs/3.3/css/#helper-classes-clearfix