This question is very similar, although it doesn't answer my question.
An answer like this would be fine, as long as it works for responsive layouts e.g. .row-fluid, which it doesn't at the moment.
Is it possible in Bootstrap to have one fluid row and multiple rows within that row like so:
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
</div>
<div class="span12">
</div>
<div class="span12">
</div>
</div>
</div>
without the second row of spans having an odd margin-left?
Click here for a JSFiddle example
Essentially what I need is to have multiple rows of spans inside a .row-fluid without the rows after the first breaking the layout.
Well the displacement is caused by a margin-left.
It's not ideal but you could always override the CSS:
.container-fluid .row-fluid [class*="span"] {
margin-left:0px;
}
Acutally though, the error seems to lie in the fact that you've declared 12 span3 DIVs, which adds up to a total of 36. 12 is the limit for a fluid container, so you'd need to make those span1:
<div class="container-fluid">
<div class="row-fluid">
<div class="span1">1
</div>
<div class="span1">2
</div>
<div class="span1">3
</div>
<div class="span1">4
</div>
<div class="span1">5
</div>
<div class="span1">6
</div>
<div class="span1">7
</div>
<div class="span1">8
</div>
<div class="span1">9
</div>
<div class="span1">10
</div>
<div class="span1">11
</div>
<div class="span1">12
</div>
</div>
<div class="row-fluid">
<div class="span3">
1
</div>
<div class="span3">
2
</div>
<div class="span3">
3
</div>
<div class="span3">
4
</div>
</div>
<div class="row-fluid">
<div class="span3">
1
</div>
<div class="span3">
2
</div>
<div class="span3">
3
</div>
<div class="span3">
4
</div>
</div>
</div>
See here: