我都使用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
全高?答案 0 :(得分:4)
.Module
没有任何高度,因为.col-
类在Bootstrap 3中浮动。当项目浮动时,它将从正常文档流中取出并且不占用空间。如果.col-
不占用空间,则.Module
没有高度。 .row
具有高度,因为它具有内置clearfix,可清除.col-
的浮点数。
要解决此问题,您可以将overflow: hidden;
添加到.Module
以清除浮动或使用clearfix。
您可能还需要考虑将.Module
移至.row
元素,具体取决于您应用的样式,即background-color
。
@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>
@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>
答案 1 :(得分:1)
在关闭clear:both
div之前使用.module
,
<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 style="clear:both"></div>
</div>
</div>
答案 2 :(得分:1)
如果目标是“给予.Module全高”,则.Module
的任何容器也必须是全高。
body, html {
height: 100%;
}
.container, .row {
height: 100%;
}
.Module {
background: gold;
min-height: 100%;
}