html - Bootstrap 3 image gallery overrides -
i using bootstrap 3 rc1, , having trouble getting image gallery set properly.
problem 1 - ul
adding padding-left
or margin-left
. need override remove it?
problem 2 - each li
spanning container instead of being limited span4
class. have 2 images per row.
i added image below showing problems are.
html
<div class="container"> <div class="row"> <div class="col-lg-12"> <div id="allvideos"> <ul class="thumbnails"> <li class="span4"> <div class="thumbnail"> <img src="<%= thumbnail_image %>"> <div class="caption"> <a data-attribute="<%= _id %>" class="delete">x</a> <h3><a class="video_item"><%= title %></h3></h3> </div> </div> </li> </ul> </div> </div> </div> </div>
image
bootstrap 2.3 used "span" classes (span4
in example), , bootstrap 3.0 uses "col-x" classes (col-lg-x
in example). "span" classes no longer exist.
problem 1 - use list-unstyled
class remove left/right margin <li>
children. http://getbootstrap.com/css/#type-lists
problem 2 - drop span class , use bootstrap 3's new classes:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <div class="container"> <ul class="list-inline list-unstyled row"> <li class="col-lg-4"> <div class="thumbnail"> <img src="http://placehold.it/350x150" alt=""> <div class="caption"> <a class="delete">x</a> <h3><a class="video_item">howdy</a></h3> </div> </div> </li> <li class="col-lg-4"> <div class="thumbnail"> <img src="http://placehold.it/350x150" alt=""> <div class="caption"> <a class="delete">x</a> <h3><a class="video_item">howdy</a></h3> </div> </div> </li> <li class="col-lg-4"> <div class="thumbnail"> <img src="http://placehold.it/350x150" alt=""> <div class="caption"> <a class="delete">x</a> <h3><a class="video_item">howdy</a></h3> </div> </div> </li> </ul> </div>
Comments
Post a Comment