CODEWITHSUNDEEP
twitter-bootstrap
Dean Hiller
Dean Hiller

Reputation: 20204

simple twitter bootstrap fluid layout span5 != span5

I have the following example where the last TWO paragraphs at the bottom are span5 but don't match the span 10 above them AND don't match the span5's that are above that span10 either.

http://jsfiddle.net/MgcDU/2959/

Add snippet of code so stackoverflow let's me post(how stupid)....stackoverflow actually errors out saying must paste jsfiddle code here which just seems dumb to me since it is piece with lots of text in it.

<div class="row-fluid">

Any idea how I can fix this?

thanks, Dean

Upvotes: 0

Views: 2142

Answers (2)

Simon C
Simon C

Reputation: 9508

From the twitter bootstrap docs:

Fluid grids utilize nesting differently: each nested level of columns should add up to 12 columns. This is because the fluid grid uses percentages, not pixels, for setting widths.

Upvotes: 1

Billy Moat
Billy Moat

Reputation: 21050

When using row-fluid the contents have to add up to 12.

http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem

<div class="row-fluid">
  <div class="span12">
    Fluid 12
    <div class="row-fluid">
      <div class="span6">
        Fluid 6
        <div class="row-fluid">
          <div class="span6">Fluid 6</div>
          <div class="span6">Fluid 6</div>
        </div>
      </div>
      <div class="span6">Fluid 6</div>
    </div>
  </div>
</div>

Upvotes: 3

Related Questions