Twitter BootStrap - Border Pushing Content Down

Question

I am developing an HTML 5 website using a headline, article, and footer. I have an article with a border left and right in 1px solid black . This is enough to make column 12 wrap, forcing me to reduce the size of the application to 11 columns max. This leaves a blank space on the right side that I would like to fill ... Is there an easy way to get twitter bootstrap to account for this extra 2px?

Thank.

Answer 1

This has already been answered (could not find the question)

You must set boundaries for the inner element, and not for the spans themselves, because they are too tightly sewn.

Another solution is to change box-sizing to border-box . But this is css v3.

Update

Here are some examples, my best guess is the 3rd or 2nd solutions.

• Demo (jsfiddle)

• fullscreen demo (jsfiddle)

• Demo responsive (jsfiddle)

Solution 1: internal

As such, it will not respond well to responsiveness (requires @media rules to set the border depending on the stacking)

 <div class="row"> <div class="span3"> <div class="inner"></div> </div> <div class="span6"> <div class="inner"></div> </div> <div class="span3"> <div class="inner"></div> </div> </div> 

 .row > [class*="span"]:first-child > .inner { border-left: 5px solid red; } .row > [class*="span"]:last-child > .inner { border-right: 5px solid red; } 

Solution 2: fluid

Thus responds well to responsiveness.

 <div class="row-fluid"> <div class="inner-fluid clearfix"> <div class="span3"></div> <div class="span6"></div> <div class="span3"></div> </div> </div> 

 .row-fluid > .inner-fluid { border: 5px none green; border-left-style: solid; border-right-style: solid; } 

Solution 3: box-sizing

As such, it will not respond well to responsiveness (requires @media rules to set the border depending on the stacking)

 <div class="row foo"> <div class="span3"></div> <div class="span6"></div> <div class="span3"></div> </div> 

 .foo [class*="span"] { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .foo.row > [class*="span"]:first-child { border-left: 5px solid orange; } .foo.row > [class*="span"]:last-child { border-right: 5px solid orange; } 

Hope you find your size.