HTML 5 Bootstrap System Grid

Navigation
1

I need to do with the grid system if possible the image example:

Intheexampleabove,Ineedonlytheformatting,whereeacheventisa'div'withadynamicsize,andtheonewithalowglueonthetopasshownintheexample.Itriedtousethecodebelowtogetasintheexample,butwhenithitsthe'col-12'itbreaksthelineandgetseverything'straight'onthesameline,gettingdisproportionate,ie,intheexamplebelow,every4events,theywouldallbeinastraightline.

BelowisthecodeItriedtousetogettotheexamplebelow:

<divclass="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

Thanks for the help.

    
asked by anonymous 27.12.2016 / 00:44

1 answer

1

Use the Jquery.isotope plugin: 

$(document).ready(function()
{	
  $('.grid').isotope({
  	itemSelector: '.rows',
        sortBy : 'original-order'
  });
});
.rows {
  margin: 2px 2px 2px 2px;
  width: 192px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.1/isotope.pkgd.js"></script><divclass="grid">
  <div class="rows">
    <img src="https://s-media-cache-ak0.pinimg.com/736x/9b/03/28/9b032800c0034f2690223e12ff014809.jpg"border="0" style="width:190px" /> 
  </div>  
  <div class="rows">
    <img src="https://s-media-cache-ak0.pinimg.com/originals/ae/27/88/ae27883794e4a96e9d9a4cb2b2d1313b.jpg"border="0" style="width:190px"/>
  </div>
  <div class="rows">
    <img src="https://s-media-cache-ak0.pinimg.com/736x/9b/03/28/9b032800c0034f2690223e12ff014809.jpg"border="0" style="width:190px" /> 
  </div>   
  <div class="rows">
    <img src="https://s-media-cache-ak0.pinimg.com/originals/ae/27/88/ae27883794e4a96e9d9a4cb2b2d1313b.jpg"border="0" style="width:190px"/>
  </div>  
   <div class="rows">
    <img src="https://s-media-cache-ak0.pinimg.com/736x/9b/03/28/9b032800c0034f2690223e12ff014809.jpg"border="0" style="width:190px" /> 
  </div>  
  <div class="rows">
    <img src="https://s-media-cache-ak0.pinimg.com/originals/ae/27/88/ae27883794e4a96e9d9a4cb2b2d1313b.jpg"border="0" style="width:190px"/>
  </div> 
  <div class="rows">
    <img src="https://s-media-cache-ak0.pinimg.com/originals/ae/27/88/ae27883794e4a96e9d9a4cb2b2d1313b.jpg"border="0" style="width:190px"/>
  </div>
  <div class="rows">
    <img src="https://s-media-cache-ak0.pinimg.com/736x/9b/03/28/9b032800c0034f2690223e12ff014809.jpg"border="0" style="width:190px" /> 
  </div>
</div>

The classes of bootstrap-3 should be removed, Jquery.isotope will play this role even when you decrease or increase the page.

    
27.12.2016 / 01:31
Popular select a partit from another select using python and django Instantiate an object of a class managed by Spring