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 enough to cause the 12 column to wrap, forcing me to size down the app to 11 columns max. This leaves a white space on the right side I'd like to fill up... Is there an easy way to get twitter bootstrap to account for this extra 2px?
Thanks.
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.
Here are several examples, my best guess is the 3rd or 2nd solution.
Demo (jsfiddle)
Full screen demo (jsfiddle)
Demo responsive (jsfiddle)
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;
}
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;
}
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With