Thursday, 15 March 2012

4 columns to 2 columns with Twitter Bootstrap -



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