Twitter Bootstrap Overflow Covers

Question

http://jsfiddle.net/jgehrs/MgcDU/3103/

I have this block of code, which should lead to 4 equal sizes, all arranged horizontally, but, as you can see, the 4th block is transferred to a new line. I used the bootloader for several days, and this is the first time I have seen this.

<div id='middle' class='row'> <div class='span3'> <div>1</div> </div> <div class='span3'> <div>2</div> </div> <div class='span3'> <div>3</div> </div> <div class='span3'> <div>4</div> </div> 

Edit: here is jsFiddle showing the problem.

Answer 1

Fluid scaling works with percentages. You can try the <div class="row-fluid"> , which fixed it for me.

Answer 2

Jsfiddle

Css adding a border is executed after the grid system calculates the width and causes the element to wrap. I put the class in the inner div and applied the border to the inner element. I also wrapped the string in a div container to give it a fixed layout.

 .myBorder { border: 1px solid gray; } <div class='container'> <div class='row'> <div class='span3'> <div class="myBorder">1</div> </div> 

Bordered Wrap Elements

Answer 3

You need to wrap the string in a div using the container class. Also, change the class of the div line to row-fluid , for example:

  <div class='container'> <div class='row-fluid'> <div class='span3'> <div>1</div> </div> <div class='span3'> <div>2</div> </div> <div class='span3'> <div>3</div> </div> <div class='span3'> <div>4</div> </div> </div> </div> 

Check out the demo here: http://jsfiddle.net/MgcDU/3107/

Hope this helps.

Answer 4

See if this is close to what you need: http://jsfiddle.net/panchroma/F7zRy/

As @kyriakos pointed out that you want to use <div class='row-fluid'> if you want a fluid mesh, and optionally wrap everything with <div class="container-fluid"> if you want your mesh filled the whole window.

And it's better not to use borders, because they add extra column width and will cause packaging. If you need to use borders, use border-box

Good luck