Twitter BootStrap - 边框将内容向下推

Question

我正在设计一个使用头部、文章和页脚的HTML 5网站。我有一篇文章，左右两侧有1像素黑色边框。这足以导致12列换行，迫使我将应用程序缩小到最大11列。这留下了右侧的空白区域，我想填满它...是否有一种简单的方法让Twitter Bootstrap考虑这额外的2像素呢？

谢谢。

- Brian Mains

Answer 1

这个问题已经有答案了（但找不到问题）

你需要给内部元素设置边框，而不是给本身设置边框，因为它们的宽度太紧密了。

另一个解决方案是将box-sizing更改为border-box。但这是CSS V3。

更新

以下是几个示例，我最好的猜测是第三或第二个解决方案。

1. 演示（jsfiddle） 2. 全屏演示（jsfiddle） 3. 响应式演示（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;
}

解决方案三: 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;
}

我希望你能找到合适的尺码。

- Sherbrow

---

但是我想要给文章添加一个外边框，这样就可以在整个网站的左侧和右侧放置水平线，而不是在每个span周围。 - Brian Mains

@BrianMains 那么单边框呢？看看这些例子 ;) - Sherbrow