我都在使用 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
全高?
最佳答案
.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>
关于html - .col 周围的包装 div 没有高度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42982239/