Twitter BootStrap - 边框推送内容下来

Question

我正在使用标题,文章和页脚设计HTML 5网站.我有一篇文章左边和右边有边框1px solid black.这足以导致12列包裹,迫使我将应用程序的大小缩小到最多11列.这会在右侧留下一个空白区域,我想填满...有没有一种简单的方法让Twitter引导程序来计算这个额外的2px？

谢谢.

Answer 1

这已经得到了解答(虽然找不到问题)

您必须将边框设置为内部元素,而不是跨度本身,因为它们的宽度太紧.

另一种解决方案是改变box-sizing为border-box.但这是css v3.

更新

以下是几个例子,我最好的猜测是第三或第二个解决方案.

• 演示(jsfiddle)

• 全屏演示(jsfiddle)

• 演示响应(jsfiddle)

解决方案1:内部

因此,响应不会很好(需要@media规则来设置边框取决于堆叠)

<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;
}

解决方案2:流体

因此,对响应性的反应很好

<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;
}

解决方案3: box-sizing

因此,响应不会很好(需要@media规则来设置边框取决于堆叠)

<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;
}

我希望你能找到你的尺码.