spans adding up to parent in bootstrap not working if in well

Question

<div class="row">
    <div class="span8">
        <div class="well well-large">
            <h3>Place an Order</h3>

            <div class="row">
                <div class="span3">Bid Price</div>
                <div class="span2">Execute</div>
                <div class="span3">Ask Price</div>
            </div>
        </div>

That's my structure. The Bid Price, Execute and Ask Price should all fit on the same row. Because they're in a well, they appear not to. Is this known behavior and is there anyway around it?

Answer 1

Why does the nested row not fit in one line?

The problem is the padding and the border from the well element. span8 class has a fixed width of 620px when is inside a normal row.

The well-large element has a padding of 24px (green part) and a border of 1px, so the nested row will be inside the blue part. But the blue part doesn't have a 620px width, it has a 570px width.

The span elements inside the nested row has also a fixed width. span2 has a width of 140px and span3 has a width of 220px.

If you add all the widths from the span elements and their margins (220px + 140px + 220px + (20px * 2) = 620px), the total width of the row is greater than the well element (570px), so the last element is being pushed to the next line.

How to solve it?

First attempt

My first and easier solution, is to put the class span8 in the well element like that (JSFiddle):

<div class="row">
   <div class="span8 well well-large">
      <h3>Place an Order</h3>

      <div class="row">
         <div class="span3">Bid Price</div>
         <div class="span2">Execute</div>
         <div class="span3">Ask Price</div>
      </div>
   </div>
</div>

This solves the previous problem, but add one problem. Since the padding is now in the span8 element, the main grid is broken, since the well element has a width of 670px (to the width of 620px, you have to add 50px from padding and border of the well).

But now the blue part, has 620px of width, so all the elements of the nested row can fit perfectly in the blue part. But as I said before, the grid is broken. For example, if you add a span4 element after the span8, the span4 is being pushed to the next line, like was happening before with the nested elements.

So with this layout (JSFiddle):

<div class="row">
    <div class="span8 well well-large">
         <!-- Some ramdom text -->
    </div>
    <div class="span4">
         <!-- Some ramdom text -->
    </div>
</div>

You have this result:

Final solution

If you want 3 columns inside a well, you need to different grid system. One solution can be using row-fluid instead of row. With row-fluid, the width of the span elements is a percentage, instead of a fixed width.

With this layout (JSFiddle):

<div class="row">
    <div class="span8">
        <div class="well well-large">
            <h3>Place an Order</h3>

            <div class="row-fluid">
                <div class="span4">Bid Price</div>
                <div class="span4">Execute</div>
                <div class="span4">Ask Price</div>
            </div>
        </div>
    </div>
</div>

You can achieve something similar to what you wanted really. If you want a exact proportion of 3/8, 2/8 and 3/8 (like your initial setup with spans), you have to use CSS to make a three column layout, you can't do it using only bootstrap span elements.