html - .col 周围的包装 div 没有高度？

Question

我都在使用 Bootstrap 3 并尝试模块化我的样式，如下所示:(空的 <span>s 是由 React 生成的，不知道如何去掉它们...)

html

<div class="row">
    <span></span>
    <div class="Module">
        <span></span>
        <div class="col-xs-3">
            <span></span>
            <div class="thumbnail-wrapper">
                <span><img alt="My something" class="img-thumbnail" src="/static/media/avatar.96308863.png"></span>
                <div class="img-thumbnail-close-btn hidden">
                    <span><span class="fa-stack fa-1x"><i class="fa fa-circle fa-stack-2x white-background"></i><i class="fa fa-circle-thin fa-stack-2x black-border"></i><i class="fa fa-times fa-stack-1x"></i></span></span>
                </div>
            </div>
        </div>
    </div>
</div>

Module没有高度但col-xs-*和 row做。

• 为什么？
• 我怎么给Module全高？

Answer 1

.Module 没有任何高度，因为 .col- 类在 Bootstrap 3 中是 float 的。当元素 float 时，它会从普通文档中取出流动，不占用空间。如果 .col- 不占用空间，那么 .Module 就没有高度。 .row 有高度，因为它有一个内置的 clearfix清除 .col- 的 float 。

要解决此问题，您可以将 overflow: hidden; 添加到 .Module 以清除 float 或使用 clearfix .

您可能还需要考虑将 .Module 移动到 .row 元素，具体取决于您应用的样式，即 background-color。

未清除的 float

@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );

.Module {
  background-color: gold;
}

<div class="row">
  <div class="Module">

    <div class="col-xs-6">
      Some content here
    </div>

    <div class="col-xs-6">
      Some content here
    </div>
    
  </div>
</div>

清除 float

@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );

.Module {
  background-color: gold;
  overflow: hidden;
}

<div class="row">
  <div class="Module">

    <div class="col-xs-6">
      Some content here
    </div>

    <div class="col-xs-6">
      Some content here
    </div>
    
  </div>
</div>