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