Twitter bootstrap row with spans wraps

Question

Using twitter bootstrap, I'm trying to figure out why the last "column" wraps.

<div class="row span4 solidBottom">
        <div class="span1">
            <label>A</label>
        </div>
        <div class="span1">
            <label>B</label>
        </div>
        <div class="span1">
            <label>C</label>
        </div>
        <div class="span1">
            <label>D</label>
        </div>
</div>

It results in:

 A   B   C 
 D
___________

SPAN 4 = 300px
Four Span1s = 240
3 Paddings = 60
240 + 60 = 300

So any clue as to why it wraps?

I'm trying to make multi column forms and would like to keep the columns and rows organized.

Thank you.

EDIT: adding style="width:auto" to the row solves the problem, but why does the 300px default width wrap?

Answer 1

You are correct that span4 is 300px, but I believe there's an error in your HTML.

You need to wrap your nested columns in a new .row class. When you do this the wrapping stops. See http://jsfiddle.net/panchroma/UBTv4/ for and example using the default (non-fluid) Bootstrap grid.

This is the HTML I've used:

<div class="container">

<div class="row">
    <div class="span4 solidBottom">

        <div class="row">
            <div class="span1">
                <label>A</label>
            </div>

            <div class="span1">
                <label>B</label>
            </div>

            <div class="span1">
                <label>C</label>
            </div>

            <div class="span1">
                <label>D</label>
            </div>

        </div> <!-- end nested row -->

        <div class="span8"> </div>

  </div> <!-- end parent row -->
</div> <!-- end container -->  

For fixed grids, the number of columns in the nested row should add up to the number of colums in the parent column (ie four in this case)

If you are using fluid grids (ie row-fluid), the number of columns in the nested row should add up to 12.