Tuesday, 15 September 2015

css - Bootstrap multiple columns folding -



css - Bootstrap multiple columns folding -

hi guys need have 2 columns layout need content stack up. here fiddle http://jsfiddle.net/kljuco/kpmcj/.

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet"> <div class="row"> <div class="span6"> <table class="table"> <tr><th colspan="2">test 1</th></tr> <tr> <td>test</td> <td>test</td> </tr> <tr> <td>test</td> <td>test</td> </tr> </table> </div> <div class="span6"> <table class="table"> <tr><th colspan="2">test 2</th></tr> <tr> <td>test</td> <td>test</td> </tr> <tr> <td>test</td> <td>test</td> </tr> <tr> <td>test</td> <td>test</td> </tr> <tr> <td>test</td> <td>test</td> </tr> <tr> <td>test</td> <td>test</td> </tr> <tr> <td>test</td> <td>test</td> </tr> <tr> <td>test</td> <td>test</td> </tr> <tr> <td>test</td> <td>test</td> </tr> </table> </div> </div> <div class="row"> <div class="span6"> <table class="table"> <tr><th colspan="2">test 3</th></tr> <tr> <td>test</td> <td>test</td> </tr> <tr> <td>test</td> <td>test</td> </tr> <tr> <td>test</td> <td>test</td> </tr> </table> </div> <div class="span6"> <table class="table"> <tr><th colspan="2">test 4</th></tr> <tr> <td>test</td> <td>test</td> </tr> <tr> <td>test</td> <td>test</td> </tr> <tr> <td>test</td> <td>test</td> </tr> </table> </div> </div><div class="row"> <div class="span6"></div> <div class="span6"></div> </div><div class="row"> <div class="span6"></div> <div class="span6"></div> </div>

i need "test 3" table right beneath "test 1" table. thnx

you nest rows this...

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet"> <div class="row"> <div class="span6"> <table class="table"> <tr><th colspan="2">test 1</th></tr> <tr> <td>test</td> <td>test</td> </tr> <tr> <td>test</td> <td>test</td> </tr> </table> <div class="row"> <div class="span6"> <table class="table"> <tr><th colspan="2">test 3</th></tr> <tr> <td>test</td> <td>test</td> </tr> <tr> <td>test</td> <td>test</td> </tr> <tr> <td>test</td> <td>test</td> </tr> </table> </div> </div> </div> <div class="span6"> <table class="table"> <tr><th colspan="2">test 2</th></tr> <tr> <td>test</td> <td>test</td> </tr> <tr> <td>test</td> <td>test</td> </tr> <tr> <td>test</td> <td>test</td> </tr> <tr> <td>test</td> <td>test</td> </tr> <tr> <td>test</td> <td>test</td> </tr> <tr> <td>test</td> <td>test</td> </tr> <tr> <td>test</td> <td>test</td> </tr> <tr> <td>test</td> <td>test</td> </tr> </table> <div class="row"> <div class="span6"> <table class="table"> <tr><th colspan="2">test 4</th></tr> <tr> <td>test</td> <td>test</td> </tr> <tr> <td>test</td> <td>test</td> </tr> <tr> <td>test</td> <td>test</td> </tr> </table> </div> </div> </div> </div> <div class="row"> <div class="span6"></div> <div class="span6"></div> </div><div class="row"> <div class="span6"></div> <div class="span6"></div> </div>

at to the lowest degree can start tweaking result want

css twitter-bootstrap

No comments:

Post a Comment