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 span4class. 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 enter image description here

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

Popular posts from this blog

ios - UICollectionView Self Sizing Cells with Auto Layout -

node.js - ldapjs - write after end error -

DOM Manipulation in Wordpress (and elsewhere) using php -