css - Twitter Bootstrap in Drupal 7 columns not lining up in Safari -
i have bootstrap module installed. have made custom tpl files layout of views strip out unnecessary divs structure follows:
<body> <div class="mysection"> <div class="container"> <h2>title</h2> <div class="row"> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"> <a href="linktocontent"> <div> <img src="contentimg" class="img-responsive"/> </div> </a> </div> </div> </div> </div> i'm tearing hair out because @ 992px - 1199px in safari, , 1200px + in chrome second line of columns out. 4th column floating right , 5th , 6th floating left below 4th this:
[ 1 ] [ 2 ] [ 3 ] [ 4 ] [ 5 ] [ 6 ] it's fine 991px , lower in both browsers.
i had assumed there within divs throwing out padding or column width, or i've had problems straight bootstrap , html projects content of column, despite fitting ok visually, has pushed columns out in similar way. so, i've stripped right down , taken out own css , of content, it's worse before (it had been fine in chrome).
i've had success taking guttering off rows that's caused problems in other areas.
now wondering if bootstrap drupal more trouble it's worth , should instead use simple grid system responsive grid system. advice or welcome!
this typically happens when 1 (or some) of columns different in vertical size. fix should use rows bootstrap provides , enclose every 3 columns in different row.
Comments
Post a Comment