我要显示的拇指数量未知,这里是呈现的 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>
结果如下:
问题:由于我动态构建 UI,如何在不创建另一个 <div class="row-fluid">
的情况下避免第二行的边距
更新需要IE8解决方案
最佳答案
假设使用 :nth-child(4n) 的 LI 父级的宽度不会改变,应该可以定位 x
元素。
.row-fluid li:nth-child(4n) {
margin: 10px;
padding: 0;
}
参见 spec有关如何为 :nth-child() 编写公式的详细信息。
一个非常非常基本的Fiddle显示它正在工作。
更新
要使用 IE8,只需使用 jQuery(假设您正在使用它)
$('.row-fluid li:nth-child(4n)').css({'margin':'10px'});
我相信这应该可以解决问题。
关于javascript - 如何创建 Bootstrap 缩略图网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15205880/