Menu
I have an unknown number of thumbs to display, here is an example of the HTML rendered:
<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">
Update IE8 solution is required
523
Step 1: Include Bootstrap and jQuery CDN into the <head> tag before all other stylesheets to load our CSS. Step 2: Add <div> tag in the HTML body with class row. In that <div> create four div sections to create four images. Step 3: Add “col-sm-6” and “col-md-3” to four div sections which creates webpage responsive.
img-thumbnail class. Image Thumbnails: In Bootstrap 4, the image thumbnail is a border surrounded by the image. To create this image thumbnail you can use the . img-thumbnail class.
A thumbnail also means a small and approximate version of a full-size image or brochure layout as a preliminary design step. This is also referred to as a preview image and is a smaller version of the original image.
To create thumbnail image with CSS, use the border property.
Assuming the width won't change of the LI's parent using :nth-child(4n) should work to target the x element.
.row-fluid li:nth-child(4n) {
margin: 10px;
padding: 0;
}
See the spec for details on how to write formulas for :nth-child().
A very very basic Fiddle displaying it working.
Update
To work with IE8 just use jQuery (assuming you're using it)
$('.row-fluid li:nth-child(4n)').css({'margin':'10px'});
I do believe that should do the trick.
89
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
