html - How to wrap multiple uneven height .col- siblings in Bootstrap .row -
i have lot of products , need maximum 6 products each line, let each product col-lg-2
(6*2 = 12 bootstrap cols) , think should break next line automatically (starts on left side), isn't it?
but second line broken , start fourth col instead. please, reason , how can fix it?
see image below maybe simulate better english. in advance.
use .clearfix class before ending row
<div class="row"> <div class="col-lg-2 col-sm-4 col-xs-6"></div> <div class="col-lg-2 col-sm-4 col-xs-6"></div> <div class="col-lg-2 col-sm-4 col-xs-6"></div> <div class="col-lg-2 col-sm-4 col-xs-6"></div> <div class="col-lg-2 col-sm-4 col-xs-6"></div> <div class="col-lg-2 col-sm-4 col-xs-6"></div> <div class="clearfix"></div> //use before end of row </div>
or if possible use not more 6 container in 1 row take row , add next 6 container
Comments
Post a Comment