html - Multiple divs on fluid row with two different spans -
i'm trying space in between div has span6 - either margin-left: or margin-right: having margin of 20px spacing, remaining space on right think 20px. can out there make red divs have space layout looks fluid?
my layout have span12 , span6 , span6 must show 2 divs in row.
<div class="container-fluid"> <div class="row-fluid"> <div class="span12">1</div> <div class="span6">2</div> <div class="span6">3</div> <div class="span12">4</div> <div class="span6">1</div> <div class="span6">2</div> <div class="span12">3</div> </div> </div> this css i'm using:
.span12 { background-color:grey; } .span6 { background-color:red } .row-fluid [class*="span"] { margin-left:0px; margin-bottom:20px } .row-fluid .span6:nth-child(3n) { margin-left:20px }
in bootstrap row can contain maximum of 12 columns altogether in case have many columns
it not number of columns total of span counts 12 + 6 + 6 etc
you need split multiple rows
<div class="container-fluid"> <div class="row-fluid"> <div class="span12"> 1 </div> </div> <div class="row-fluid"> <div class="span6"> 2 </div> <div class="span6"> 3 </div> </div> <div class="row-fluid"> <div class="span12"> 4 </div> </div> <div class="row-fluid"> <div class="span6"> 1 </div> <div class="span6"> 2 </div> </div> <div class="row-fluid"> <div class="span12"> 3 </div> </div> </div> demo: fiddle - need expand width of result panel since responsive css not included
Comments
Post a Comment