Geek asks and answers

How to create a bootstrap thumbnail grid

I have an unknown number of thumbs to display, here is an example of the displayed 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: screen shot

Question . Since I am building the UI dynamically, how can I avoid the field in the second line without creating another<div class="row-fluid">

Update requires IE8 solution

+5
source share
3 answers

Assuming that the width of the parent LI element will not change, using : nth-child (4n) should work to target the element x.

.row-fluid li:nth-child(4n) {
    margin: 10px;
    padding: 0;
 }

For more information on writing formulas for nth-child (), see.

Very simple fiddle showing that it works.

Update

IE8 jQuery ( )

$('.row-fluid li:nth-child(4n)').css({'margin':'10px'});

, .

+8

, , .

, <li style="display:none"></li> . , Bootstrap <li>, .

, , js.

+3

Had the same problem, but not a clean, but quick workaround was the following:

.row {
   margin-left: 0px !important;
   margin-right: 0px !important;
}
0
source

More articles:


All Articles