Twitter BootStrap - Border Pushing Contents Down

Question

I\'m designing an HTML 5 site using a header, article, and footer. I have an article with a border on the left and right side at 1px solid black. This is enou

Answer 1

This has already been answered (couldn't find the question though)

You have to set borders to an inside element, not the spans themselves, because they are too tightly width'ed.

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

Update

Here are several examples, my best guess is the 3rd or 2nd solution.

• Demo (jsfiddle)

• Full screen demo (jsfiddle)

• Demo responsive (jsfiddle)

Solution 1 : inners

As such, will not respond well to responsive (needs @media rules to set the border depending on 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

As such, will respond well to responsive

<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, will not respond well to responsive (needs @media rules to set the border depending on 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;
}

I hope you'll find your size.