4 columns to 2 columns with Twitter Bootstrap -
i have 4 columns fluid-layout:
<div class="container-fluid"> <div class="row-fluid"> <div class="span3">a</div> <div class="span3">b</div> <div class="span3">c</div> <div class="span3">d</div> </div> </div> [ ][ b ][ c ][ d ]
for mobile devices, bootstrap renders columns 1 under another, works fine:
[ ] [ b ] [ c ] [ d ]
but tablets, i'd have 2 columns of 2:
[ ][ b ] [ c ][ d ]
is possible accomplish behavior natively bootstrap?
i found out zurb foundation (http://foundation.zurb.com/docs/grid.php#threeblockex) offers fonctionality, want go on twitter bootstrap. i've managed add together custom rule, based on technique foundation uses :
@media (min-width: 768px) , (max-width: 979px) { .row-fluid > [class*=span]:nth-child(2n+1) { clear: both; margin-left: 0; } }
twitter-bootstrap
No comments:
Post a Comment