twitter-bootstrap Bootstrap 3 网格布局动态生成的列不清晰
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21444053/
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 grid layout dynamically generated columns don't clear right
提问by Paul B.
I'm trying to generate a bootstrap (v3.0.3) grid layout. Data is dynamically generated with following code:
我正在尝试生成引导程序 (v3.0.3) 网格布局。使用以下代码动态生成数据：
<div class="row">
@foreach (var Node in Model.Tour.Nodes)
{
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
@Node.SomeData
</div>
</div>
}
</div>
Unfortunately, sometimes columns don't clear right as one is taller than the other, and I get something like this:
不幸的是，有时列不清晰，因为一个比另一个高，我得到这样的东西：
I know that there is a way to fix that by adding clearfix class where the new row should start:
我知道有一种方法可以通过在新行开始的位置添加 clearfix 类来解决这个问题：
<div class="clearfix visible-xx"></div>
But I can't really do it when content is dynamically generated.
但是当内容是动态生成的时候我真的做不到。
Are there any solutions for such problems, or maybe my approach is wrong as I'm new to bootstrap.
是否有针对此类问题的任何解决方案，或者我的方法可能是错误的，因为我是引导程序的新手。
回答by cfx
I can't really do it when content is dynamically generated.
当内容是动态生成时，我真的做不到。
EDIT 4/29/2016
编辑 4/29/2016
Latest solution: http://jsfiddle.net/silb3r/3hzmwbt0/
最新解决方案：http: //jsfiddle.net/silb3r/3hzmwbt0/
The first solution (still below) relies heavily on altering your HTML markup. This is undesirable because: (1) it's not semantic; (2) empty elements aren't great; and (3) it will affect your ability to use nth-childselectors on your columns effectively.
第一个解决方案（仍在下面）在很大程度上依赖于更改您的 HTML 标记。这是不可取的，因为： (1) 它不是语义的；(2) 空元素不是很好；(3) 它会影响您nth-child在列上有效使用选择器的能力。
Those are just a few reasons why I put together a quick version of this which relies solely on CSS without any clearfix elements in your markup.
这些只是为什么我把这个快速版本放在一起的几个原因，它完全依赖于 CSS，在你的标记中没有任何 clearfix 元素。
The latest solution targets and clears columns' left sides at various viewport widths.
最新的解决方案以各种视口宽度为目标并清除列的左侧。
Using this syntax: nth-child(an +b)
使用此语法： nth-child(an +b)
a =the number of columns you're displaying at that viewport
a =您在该视口中显示的列数
b = a + 1
b = a + 1
END EDIT
结束编辑
Of course you can! You'll need to keep track of the thumbnail count and output a different clearfix accordingly. In your example, you would need:
当然可以！您需要跟踪缩略图计数并相应地输出不同的清除修复。在您的示例中，您需要：
<div class="clearfix visible-sm-block"></div>after every two thumbnail columns<div class="clearfix visible-md-block"></div>after every three thumbnail columns<div class="clearfix visible-lg-block"></div>after every four thumbnail columns
<div class="clearfix visible-sm-block"></div>每两个缩略图列之后<div class="clearfix visible-md-block"></div>每三个缩略图列之后<div class="clearfix visible-lg-block"></div>每四个缩略图列之后
You should be able to create an index variable set to 0 and iterate it each time in your loop while using the modulo operator to output the correct clearfix.
您应该能够创建一个设置为 0 的索引变量并在每次循环中迭代它，同时使用模运算符输出正确的 clearfix。
You can definitely combine visibility classes when multiple clearfixes occur after a thumbnail column as I've done in this working example: http://jsfiddle.net/silb3r/jtg7sn9z/.
当缩略图列之后发生多个清除修复时，您绝对可以组合可见性类，就像我在这个工作示例中所做的那样：http: //jsfiddle.net/silb3r/jtg7sn9z/。
EditUpdated the working example (http://jsfiddle.net/silb3r/jtg7sn9z/1/) and the code below to reflect the new Bootstrap visibility classes which now include the box model.
编辑更新了工作示例 ( http://jsfiddle.net/silb3r/jtg7sn9z/1/) 和下面的代码以反映新的 Bootstrap 可见性类，其中现在包含盒模型。
example:
例子：
<div class="row">
@for(var i = 0; i < Model.Tour.Nodes.Length; i++) {
var Node = Model.Tour.Nodes[0];
if(i % 2 == 0) {
<div class="clearfix visible-sm-block"></div>
}
if(i % 3 == 0) {
<div class="clearfix visible-md-block"></div>
}
if(i % 4 == 0) {
<div class="clearfix visible-lg-block"></div>
}
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
@Node.SomeData
</div>
</div>
}
</div>
回答by user2107656
.row > div.col:nth-of-type(3n+1) {
clear: both;
}
回答by rebo_sol
For angularJS ng-repeate, I used the following:
对于 angularJS ng-repeate，我使用了以下内容：
<div class="row">
<div data-ng-repeat="node in Model.Tour.Nodes track by $index">
<div data-ng-if="$index != 0 && $index % 2 == 0" class="clearfix visible-sm-block"></div>
<div data-ng-if="$index != 0 && $index % 3 == 0" class="clearfix visible-md-block"></div>
<div data-ng-if="$index != 0 && $index % 4 == 0" class="clearfix visible-lg-block"></div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
{{node.SomeData}}
</div>
</div>
</div>
回答by Diego Moreira
You could use the following CSS:
您可以使用以下 CSS：
.row > div.col:nth-of-type(even) {
clear: both;
}
Reference:http://www.w3schools.com/cssref/sel_nth-of-type.asp
回答by katkhalifa
If you choose to use nth-of-type, you can combine those with media queries to clear the appropriate columns at different viewport widths.
如果您选择使用 nth-of-type，您可以将它们与媒体查询结合使用以清除不同视口宽度的相应列。
