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

这是因为“折叠父母”或“大崩溃”问题，你可以在这里得到一个很好的想法：https://css-tricks.com/all-about-floats/

基本上，如果这个父元素只包含浮动元素，那么它的高度就会崩溃为零。

由于您正在使用引导程序，因此可以使用已包含在其中的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

Answer 2

实际上背景是蓝色的，但你看不到它，因为div的填充是0px。你可以添加例如：padding：0px;

Answer 3

col有一个float：left CSS属性，所以父类应该有一个浮动属性集（左或右）来实际包含子元素。

两个选项：

1-）将父级设置为float：left;

2-）使父显示为flex，然后它将强制子元素在其中。

Answer 4

有两种不同的方法可以解决这个问题 1）只需在＆＃34;＆＃34;上添加背景颜色内联样式。 2）使你的背景颜色浮动。

由于您的父行div是浮动元素，您应该添加任何具有浮动元素的样式。

喜欢<div class="row" style="background-color: blue"><div class="col-xs-12">....</div></div>。

希望这可以帮到你。

Bootstrap 3嵌套col不采用父样式

4 个答案: