twitter-bootstrap Bootstrap 3 列问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18523024/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 column issue
提问by BrettD
I'm working with bootstrap 3, and am new to it but it seems like a fairly simple transition from 2.
我正在使用bootstrap 3，并且是新手，但它似乎是从 2 的一个相当简单的过渡。
Here is the jsfiddle with the code: http://jsfiddle.net/AHvLW/
这是带有代码的 jsfiddle：http: //jsfiddle.net/AHvLW/
And here is an image of how it renders when they are all in col-md-4:
这是当它们都在 col-md-4 时它如何呈现的图像：
I don't get it though, it works fine in jsFiddle, but not on my index file. Anyone experience a similar issue of might know whats up with it?
我不明白，它在 jsFiddle 中运行良好，但在我的索引文件中运行良好。任何遇到类似问题的人都可能知道这是怎么回事？
回答by koala_dev
Since the columns are not all equal in height you need to add a clearfix <div>for the large viewports just as the new row should start, that is between your 3rd and 4th column:
由于列的高度不同，您需要<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>
回答by Ajoy
回答by Bart Calixto
not an answer to your question, but you should be able to optimize your code since there is no need to use all size classes.
不是您问题的答案，但您应该能够优化您的代码，因为无需使用所有尺寸类。
<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>
回答by Mothy
Please check whether your div tags are closed correctly and the classes that you are using have correctly referenced in your code.
请检查您的 div 标签是否正确关闭以及您使用的类是否在您的代码中正确引用。
回答by Aus-tn
If you're looking for a solution where you don't mind all three columns being of equal height, and you can't use a wrapper due to calling different column numbers per different screen sizes you can apply a rule similar to my solution where I apply an id to a main wrapper of the columns and then style the column size to have a minimum height.
如果您正在寻找一种解决方案，您不介意所有三列的高度相同，并且由于每个不同的屏幕尺寸调用不同的列号而无法使用包装器，您可以应用类似于我的解决方案的规则我将 id 应用于列的主要包装器，然后将列大小设置为具有最小高度。
main#shop .col-md-3 {
min-height:600px;
}
回答by Buts
Thought this may help some people. Just add the following to your stylesheet. I have provided CSS or SCSS.
认为这可能会帮助一些人。只需将以下内容添加到您的样式表中。我提供了 CSS 或 SCSS。
css
css
/*================ 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;
}
}
scss
scss
/*================ 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;
}
}
}
Then you just give your rows the new class row-uniform.
然后你只需给你的行新的类行统一。
<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>
