bootstrap grid xs becomes 18 columns not 12 columns -
<div class="row"> <div class="col-xs-12 col-sm-6 col-lg-8">.col-xs-12 .col-sm-6 .col-lg-8</div> <div class="col-xs-6 col-lg-4">.col-xs-6 .col-lg-4</div>
i have read in bootstrap grid, grids should equal 12 columns totally. in bootstrap site in grid examples have mentioned above code.. col-xs-12 , col xs-6 equals becomes 18 not 12. please clarify confusion .
the markup in question "correct", doesn't explain why. basically, if choose use more 12 columns, columns after initial 12 wrap onto next line. example:
<div class="row"> <div class="col-xs-12">...</div> <div class="col-xs-6">...</div> </div>
will produce similar result following:
<div class="row"> <div class="col-xs-12">...</div> </div> <div class="row"> <div class="col-xs-6">...</div> </div>
both methods allowed, have more control on , style of page when using row, columns, row, columns
method in second example.
read more here: bootstrap column wrapping
if more 12 columns placed within single row, each group of columns will, 1 unit, wrap onto new line.
<div class="row"> <div class="col-xs-9">.col-xs-9</div> <div class="col-xs-4">.col-xs-4<br>since 9 + 4 = 13 > 12, 4-column-wide div gets wrapped onto new line 1 contiguous unit.</div> <div class="col-xs-6">.col-xs-6<br>subsequent columns continue along new line.</div> </div>
Comments
Post a Comment