css - Twitter BootStrap - 边框下推内容

Question

我正在设计一个使用页眉、文章和页脚的 HTML 5 网站。我有一篇文章，在 1px solid black 的左侧和右侧有边框。这足以导致 12 列换行，迫使我将应用程序缩小到最多 11 列。这在右侧留下了一个空白区域，我想填充...有没有一种简单的方法可以让 Twitter bootstrap 解释这个额外的 2px？

谢谢。

Answer 1

这已经被回答了(虽然找不到问题)

您必须为内部元素设置边框，而不是 span 本身，因为它们的宽度太紧了。

另一种解决方案是将box-sizing 更改为border-box。但这是 css v3。

更新

这里有几个例子，我最好的猜测是第三或第二解决方案。

• Demo (jsfiddle)

• Full screen demo (jsfiddle)

• Demo responsive (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:框大小调整

因此，不会很好地响应响应(需要 @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;
}

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