Gaps with the addition of a parent to the bootstrap do not work if in the 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> 

This is my structure. Bid, Execute, and Ask Price must match the same line. Because they are in the well, they do not look like that. Is this known behavior and is there anyway around?

Answer 1

Why does the nested line not fit on one line?

The problem is filling and bordering the well element. span8 class has a fixed width of 620px when it is inside a normal row .

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

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

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

How to solve it?

First try

My first and simpler solution is to put the span8 class in the well element ( 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 adds one problem. Since the add-on is now in the span8 element, the main grid is broken, since the well element has a width of 670 pixels (up to a width of 620 pixels, you must add 50 pixels from the pad and the border of the hole).

But now the blue part has a width of 620 pixels, so all the elements of the nested line can fit perfectly into the blue part. But, as I said, the mesh is broken. For example, if you add a span4 element after span8 , span4 will be moved to the next line, as it was before, with 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 decision

If you need 3 columns inside well , you need another grid system. One solution might use row-fluid instead of row . With row-fluid width of the span elements is a percentage, not 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. If you need the exact proportions 3/8, 2/8 and 3/8 (for example, your initial setup with spans), you need to use CSS to create three columns, you cannot do this using only the loading file of span elements.