twitter-bootstrap 如何创建 Bootstrap 缩略图网格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15205880/
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
How to create a Bootstrap thumbnails grid
提问by Shlomi Schwartz
I have an unknown number of thumbs to display, here is an example of the HTML rendered:
我有未知数量的拇指要显示，这里是呈现的 HTML 的示例：
<div class="row-fluid">
<ul class="thumbnails">
<li class="span3">
<a href="#" class="thumbnail">
<img data-src="holder.js/260x180" alt="260x180" style="width: 260px; height: 180px;" src="mySrc">
</a>
</li>
<li class="span3">
<a href="#" class="thumbnail">
<img data-src="holder.js/260x180" alt="260x180" style="width: 260px; height: 180px;" src="mySrc">
</a>
</li><li class="span3">
<a href="#" class="thumbnail">
<img data-src="holder.js/260x180" alt="260x180" style="width: 260px; height: 180px;" src="mySrc">
</a>
</li><li class="span3">
<a href="#" class="thumbnail">
<img data-src="holder.js/260x180" alt="260x180" style="width: 260px; height: 180px;" src="mySrc">
</a>
</li><li class="span3">
<a href="#" class="thumbnail">
<img data-src="holder.js/260x180" alt="260x180" style="width: 260px; height: 180px;" src="mySrc">
</a>
</li>
<li class="span3">
<a href="#" class="thumbnail">
<img data-src="holder.js/260x180" alt="260x180" style="width: 260px; height: 180px;" src="mySrc">
</a>
</li>
<li class="span3">
<a href="#" class="thumbnail">
<img data-src="holder.js/260x180" alt="260x180" style="width: 260px; height: 180px;" src="mySrc">
</a>
</li>
</ul>
</div>
Here is the result:
结果如下：
Question: Since I build the UI dynamically, how can I avoid the margin on the second row without creating another <div class="row-fluid">
问题：由于我动态构建 UI，如何在不创建另一个的情况下避免第二行的边距<div class="row-fluid">
UpdateIE8 solution is required
需要更新IE8解决方案
回答by Jamie Hutber
Assuming the width won't change of the LI's parent using :nth-child(4n)should work to target the xelement.
假设使用:nth-child(4n)的 LI 的父级的宽度不会改变，应该可以定位x元素。
.row-fluid li:nth-child(4n) {
margin: 10px;
padding: 0;
}
See the specfor details on how to write formulas for :nth-child().
有关如何为 :nth-child() 编写公式的详细信息，请参阅规范。
A very very basic Fiddledisplaying it working.
一个非常非常基本的Fiddle显示它正在工作。
Update
更新
To work with IE8 just use jQuery (assuming you're using it)
要使用 IE8，只需使用 jQuery（假设您正在使用它）
$('.row-fluid li:nth-child(4n)').css({'margin':'10px'});
I do believe that should do the trick.
我相信这应该可以解决问题。
回答by Dan
I had a case where the margin was ok to have, but it had to be consistent on all rows.
我有一个案例，边距是可以的，但它必须在所有行上保持一致。
You could achieve this by adding in a blank <li style="display:none"></li>to the start of the list. That way Bootstrap targets the margin removal on a <li>that isnt shown.
您可以通过在<li style="display:none"></li>列表的开头添加一个空格来实现这一点。这样，Bootstrap 的目标是去除未<li>显示的边距。
Having a margin may not be acceptable, but I feel this is an elegant solution without the need for mixing style into js.
有一个边距可能是不可接受的，但我觉得这是一个优雅的解决方案，不需要将样式混合到 js 中。
回答by Daten
Had same issue, not clean, but a fast workaround was the following:
有同样的问题，不干净，但一个快速的解决方法如下：
.row {
margin-left: 0px !important;
margin-right: 0px !important;
}
