我正在设计一个使用头部、文章和页脚的HTML 5网站。我有一篇文章,左右两侧有1像素黑色边框。这足以导致12列换行,迫使我将应用程序缩小到最大11列。这留下了右侧的空白区域,我想填满它...是否有一种简单的方法让Twitter Bootstrap考虑这额外的2像素呢?
谢谢。
谢谢。
box-sizing
更改为border-box
。但这是CSS V3。@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;
}
因此,会对响应式设计有良好的响应。
<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;
}
我希望你能找到合适的尺码。