我正在使用bootstrap 3
,我是新手,但它似乎是从2开始的一个相当简单的过渡。
以下是带有代码的jsfiddle:http://jsfiddle.net/AHvLW/
这是一张关于它们在col-md-4中的渲染方式的图像:
我不明白,它在jsFiddle中运行正常,但在我的索引文件中没有。任何人都会遇到类似的问题,可能知道它有什么用吗?
答案 0 :(得分:20)
由于列的高度并不相同,因此您需要为大视口添加clearfix <div>
,就像新行应该开始一样,即在第3列和第4列之间:
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">...</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">...</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">...</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-md visible-lg"></div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">...</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">...</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">...</div>
</div>
<强> Demo fiddle 强>
答案 1 :(得分:10)
答案 2 :(得分:2)
不是您问题的答案,但您应该能够优化您的代码,因为不需要使用所有大小的类。
<div class="row">
<div class="col-md-4 col-xs-6">...</div>
<div class="col-md-4 col-xs-6">...</div>
<div class="col-md-4 col-xs-6">...</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-md visible-lg"></div>
<div class="col-md-4 col-xs-6">...</div>
<div class="col-md-4 col-xs-6">...</div>
<div class="col-md-4 col-xs-6">...</div>
</div>
答案 3 :(得分:1)
请检查您的div标签是否正确关闭,并且您正在使用的类已在您的代码中正确引用。
答案 4 :(得分:1)
如果您正在寻找一个解决方案,您不必担心所有三个列的高度相同,并且由于每个不同的屏幕尺寸调用不同的列号,您无法使用包装器可以应用类似于我的解决方案的规则,其中我将id应用于列的主包装,然后将列大小设置为具有最小高度。
main#shop .col-md-3 {
min-height:600px;
}
答案 5 :(得分:1)
认为这可能对某些人有所帮助。只需将以下内容添加到样式表即可。我提供了CSS或SCSS。
/*================ Row Uniform ==================*/
.row-uniform {
margin-right: -15px;
margin-left: -15px;
}
.row-uniform:after {
clear: both;
}
.row-uniform:before {
display: table;
content: '';
}
.row-uniform .col-xs-6:nth-child(2n+1) {
clear: left;
}
.row-uniform .col-xs-4:nth-child(3n+1) {
clear: left;
}
.row-uniform .col-xs-3:nth-child(4n+1) {
clear: left;
}
.row-uniform .col-xs-2:nth-child(6n+1) {
clear: left;
}
@media (min-width: 768px) and (max-width: 992px) {
.row-uniform .col-sm-6:nth-child(2n+1) {
clear: left;
}
.row-uniform .col-sm-4:nth-child(3n+1) {
clear: left;
}
.row-uniform .col-sm-3:nth-child(4n+1) {
clear: left;
}
.row-uniform .col-sm-2:nth-child(6n+1) {
clear: left;
}
}
@media (min-width: 992px) and (max-width: 1200px) {
.row-uniform .col-md-6:nth-child(2n+1) {
clear: left;
}
.row-uniform .col-md-4:nth-child(3n+1) {
clear: left;
}
.row-uniform .col-md-3:nth-child(4n+1) {
clear: left;
}
.row-uniform .col-md-2:nth-child(6n+1) {
clear: left;
}
}
@media (min-width: 1200px) {
.row-uniform .col-lg-6:nth-child(2n+1) {
clear: left;
}
.row-uniform .col-lg-4:nth-child(3n+1) {
clear: left;
}
.row-uniform .col-lg-3:nth-child(4n+1) {
clear: left;
}
.row-uniform .col-lg-2:nth-child(6n+1) {
clear: left;
}
}
/*================ Row Uniform ==================*/
.row-uniform {
margin-right: -15px;
margin-left: -15px;
&:after {
clear:both;
}
&:before {
display: table;
content: '';
}
// 2
.col-xs-6:nth-child(2n+1) {
clear: left;
}
// 3
.col-xs-4:nth-child(3n+1) {
clear: left;
}
// 4
.col-xs-3:nth-child(4n+1) {
clear: left;
}
// 6
.col-xs-2:nth-child(6n+1) {
clear: left;
}
// sm
@media (min-width:768px) and (max-width:992px) {
// 2
.col-sm-6:nth-child(2n+1) {
clear: left;
}
// 3
.col-sm-4:nth-child(3n+1) {
clear: left;
}
// 4
.col-sm-3:nth-child(4n+1) {
clear: left;
}
// 6
.col-sm-2:nth-child(6n+1) {
clear: left;
}
}
// md
@media (min-width:992px) and (max-width:1200px) {
// 2
.col-md-6:nth-child(2n+1) {
clear: left;
}
// 3
.col-md-4:nth-child(3n+1) {
clear: left;
}
// 4
.col-md-3:nth-child(4n+1) {
clear: left;
}
// 6
.col-md-2:nth-child(6n+1) {
clear: left;
}
}
// lg
@media (min-width:1200px) {
// 2
.col-lg-6:nth-child(2n+1) {
clear: left;
}
// 3
.col-lg-4:nth-child(3n+1) {
clear: left;
}
// 4
.col-lg-3:nth-child(4n+1) {
clear: left;
}
// 6
.col-lg-2:nth-child(6n+1) {
clear: left;
}
}
}
然后,您只需为行添加新的行 - 统一。
<div class="row-uniform">
<div class="col-sm-6 col-md-4 col-lg-3">
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
</div>
</div>