Geek Answers Handbook

Cannot customize thumbnails

I use Twitter Bootstrap as a framework for my application and a thumbnail to display information about different products (6 divided into two lines). However, the thumbnails are aligned to the left, and I cannot center them. How can I do that?

HTML:

<div class="row span12"> <ul class="thumbnails span12"> <li class="span3 product"> <div class="thumbnail padding pagination-centered"> Product 1 </div> </li> <li class="span3 product"> <div class="thumbnail padding pagination-centered"> Product 2 </div> </li> <li class="span3 product"> <div class="thumbnail padding pagination-centered"> Product 3 </div> </li> <li class="span3 product"> <div class="thumbnail padding pagination-centered"> Product 4 </div> </li> <li class="span3 product"> <div class="thumbnail padding pagination-centered"> Product 5 </div> </li> <li class="span3 product"> <div class="thumbnail padding pagination-centered"> Product 6 </div> </li> </ul> </div>

Output:

  _____________________ | | | Products | | ___ ___ ___ | || | | | | | | ||___| |___| |___| | | ___ ___ ___ | || | | | | | | ||___| |___| |___| | | | |_____________________|

Desired conclusion:

  _____________________ | | | Products | | ___ ___ ___ | | | | | | | | | | |___| |___| |___| | | ___ ___ ___ | | | | | | | | | | |___| |___| |___| | | | |_____________________|
+4
source share
2 answers

you need to set the uls width to 3 added width + borders, margins and gaskets. You can achieve centering by setting the left and right margins in the car.

see demo http://jsbin.com/odojit/2/edit

 .thumbnails li { width:100px; list-style:none; float:left; height:100px; margin:10px; border:solid black 1px; } ul { padding:0px;margin:0px;} .span12 { width:368px; border:red solid 1px; margin-left:auto; margin-right:auto; }

To override something like bootstrap, you need to have a higher css specification in your new code, which means higher priority.

Usually:

An identifier selector costs 10 times more than a class selector, which is 10 times more than an element selector.

 #id div {code}

redefines

 .class .class .class .class .class .class .class .class .class .class {css code}

Check out this article for more details:

http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

So, if bootstrap uses an identifier selector to overwrite it, you can use body #idselector, which will give it a +1 specification. Important also works, but does not work in IE6.

+4
source

You can use this .........

 .thumbnails li { width:100px; list-style:none; float:left; height:100px; margin:10px; border:solid black 1px; } ul { padding:{0px;

field: 0px; }

  <ul class="thumbnails"> <li> <div class="thumbnail"> Product 1 </div> </li> <li> <div class="thumbnail"> Product 2 </div> </li> <li> <div class="thumbnail"> Product 3 </div> </li> <li> <div class="thumbnail"> Product 4 </div> </li> <li class="span3 producer"> <div class="thumbnail"> Product 5 </div> </li> <li> <div class="thumbnail"> Product 6 </div> </li> </ul>
0
source

More articles:


All Articles