我正在使用页眉,文章和页脚设计HTML 5网站。我在1px solid black
左侧和右侧有一篇带边框的文章。这足以导致12列包裹,迫使我将应用程序的大小缩小到最多11列。这会在我想填写的右侧留下一个空白区域......是否有一种简单的方法可以让twitter引导程序来计算这个额外的2px?
感谢。
答案 0 :(得分:17)
这已经得到了解答(虽然找不到问题)
你必须将边框设置为内部元素,而不是跨度本身,因为它们的宽度太紧。
另一种解决方案是将box-sizing
更改为border-box
。但这是css v3。
以下是几个例子,我最好的猜测是第3或第2个解决方案。
因此,对响应式(需要@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;
}
我希望你能找到你的尺码。