CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap-3jquery-masonry
SBB
SBB

Reputation: 8970

Bootstrap 3 issue with columns shifting

I am having an issue with my layout and I cant seem to figure it out.

I am using Bootstrap 3 with masonry. Right before masonry loads (or when its disabled) the container has 4 items in it like I expect it to. However, as soon as masonry is applied, it is knocking down the 4th item to a new row.

Is there anything obvious in the code below that would cause this? There is no CSS styling applied to my content or from masonry it self. It is just 3 col divs being placed in a 12 col container.

Masonry is adding the positions to it to make them staggered but is also knocking down my 4th one.

Any ideas of what I can do to keep 4 per row?

Notice: The style position in the image below is added from masonry and not something I have on my end prior.

enter image description here

    <div class="container">
   <ul class="thumbnails list-unstyled posts">
            <!-- Submission Block ID# 1-->
      <li class="col-md-3 item Dog" style="position: absolute; left: 0px; top: 0px;">
         <div style="padding: 0" class="thumbnail">
            <div style="padding:4px">
               <img src="uploads/nalaHUS123.png" style="width: 100%">
            </div>
            <div class="caption">
               <h4 class="">Nala  <small>(<span class="petType">Dog</span>) (1)</small></h4>
               <p>Shes a wonder pup!</p>
               <center><button class="btn btn-primary btn-sm" type="button"><i class="fa fa-heart"></i>&nbsp;&nbsp;Vote&nbsp;&nbsp;</button></center>
            </div>
            <div style="text-align: left" class="modal-footer">
               <div class="progress">
                  <div style="width: 60%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" role="progressbar" class="progress-bar">
                     <span class="sr-only">60% Complete</span>
                  </div>
               </div>
               <div class="row">
                  <div class="col-md-4"><b>Rank</b><br><small>3rd Place</small></div>
                  <div class="col-md-2"></div>
                  <div class="col-md-4"><b>Raised</b><br><small>$130.00</small></div>
               </div>
            </div>
         </div>
      </li>
      <!-- End Submission Block ID# 1-->  
            <!-- Submission Block ID# 2-->
      <li class="col-md-3 item Cat">
         <div style="padding: 0" class="thumbnail">
            <div style="padding:4px">
               <img src="uploads/simbaHUS123.png" style="width: 100%">
            </div>
            <div class="caption">
               <h4 class="">Simba  <small>(<span class="petType">Cat</span>) (2)</small></h4>
               <p>Shes a wonder pup!</p>
               <center><button class="btn btn-primary btn-sm" type="button"><i class="fa fa-heart"></i>&nbsp;&nbsp;Vote&nbsp;&nbsp;</button></center>
            </div>
            <div style="text-align: left" class="modal-footer">
               <div class="progress">
                  <div style="width: 60%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" role="progressbar" class="progress-bar">
                     <span class="sr-only">60% Complete</span>
                  </div>
               </div>
               <div class="row">
                  <div class="col-md-4"><b>Rank</b><br><small>3rd Place</small></div>
                  <div class="col-md-2"></div>
                  <div class="col-md-4"><b>Raised</b><br><small>$250.00</small></div>
               </div>
            </div>
         </div>
      </li>
      <!-- End Submission Block ID# 2-->  
            <!-- Submission Block ID# 3-->
      <li class="col-md-3 item Bird">
         <div style="padding: 0" class="thumbnail">
            <div style="padding:4px">
               <img src="uploads/boboHUS123.png" style="width: 100%">
            </div>
            <div class="caption">
               <h4 class="">BoBo  <small>(<span class="petType">Bird</span>) (3)</small></h4>
               <p>Shes a wonder pup!</p>
               <center><button class="btn btn-primary btn-sm" type="button"><i class="fa fa-heart"></i>&nbsp;&nbsp;Vote&nbsp;&nbsp;</button></center>
            </div>
            <div style="text-align: left" class="modal-footer">
               <div class="progress">
                  <div style="width: 60%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" role="progressbar" class="progress-bar">
                     <span class="sr-only">60% Complete</span>
                  </div>
               </div>
               <div class="row">
                  <div class="col-md-4"><b>Rank</b><br><small>3rd Place</small></div>
                  <div class="col-md-2"></div>
                  <div class="col-md-4"><b>Raised</b><br><small>$323.00</small></div>
               </div>
            </div>
         </div>
      </li>
      <!-- End Submission Block ID# 3-->  
            <!-- Submission Block ID# 4-->
      <li class="col-md-3 item Bird">
         <div style="padding: 0" class="thumbnail">
            <div style="padding:4px">
               <img src="uploads/frankHUS123.png" style="width: 100%">
            </div>
            <div class="caption">
               <h4 class="">Frank  <small>(<span class="petType">Bird</span>) (4)</small></h4>
               <p>Shes a wonder pup!</p>
               <center><button class="btn btn-primary btn-sm" type="button"><i class="fa fa-heart"></i>&nbsp;&nbsp;Vote&nbsp;&nbsp;</button></center>
            </div>
            <div style="text-align: left" class="modal-footer">
               <div class="progress">
                  <div style="width: 60%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" role="progressbar" class="progress-bar">
                     <span class="sr-only">60% Complete</span>
                  </div>
               </div>
               <div class="row">
                  <div class="col-md-4"><b>Rank</b><br><small>3rd Place</small></div>
                  <div class="col-md-2"></div>
                  <div class="col-md-4"><b>Raised</b><br><small>$323.00</small></div>
               </div>
            </div>
         </div>
      </li> 
         </ul>
   <nav id="pagination" style="display: none;"><a href="?page=2" class="next"></a></nav>      
</div>

UPDATE:

This is what it looks like if I turn masonry off:

enter image description here

Upvotes: 1

Views: 1622

Answers (3)

Mohamed El Mahallawy
Mohamed El Mahallawy

Reputation: 13862

From Bootstrap: Content should be placed within columns, and only columns may be immediate children of rows.

From what I can see, you have .container > .col-md-3

When you should have .container > .row > .col-md-3

Upvotes: 0

omma2289
omma2289

Reputation: 54619

The gutter masonry option is adding horizontal space between the columns so they don't fit in a single row, remove it and it should work fine.

See this updated fiddle

Upvotes: 3

mitchimus
mitchimus

Reputation: 828

Try 

<ul class="thumbnails list-unstyled">

as opposed to 

<ul class="thumbnails list-unstyled posts">

Upvotes: 0

Related Questions