Twitter BootStrap - 边界推进内容下来 [英] Twitter BootStrap - Border Pushing Contents Down

问题描述

我正在使用标题，文章和页脚设计HTML 5网站。我有一个在左侧和右侧边框的 1px实心黑色。这足以导致12列包装，迫使我将应用程序的大小降低到11列。这会留下一个白色的空间在右边我想填补...有一个简单的方法来获取twitter启动来解释这个额外的2px？

I'm designing an HTML 5 site using a header, article, and footer. I have an article with a border on the left and right side at 1px solid black. This is enough to cause the 12 column to wrap, forcing me to size down the app to 11 columns max. This leaves a white space on the right side I'd like to fill up... Is there an easy way to get twitter bootstrap to account for this extra 2px?

感谢。

推荐答案

这已经回答了（找不到问题）

This has already been answered (couldn't find the question though)

您必须将边界设置为一个内部元素，而不是跨度本身，因为它们的宽度太窄。

You have to set borders to an inside element, not the spans themselves, because they are too tightly width'ed.

另一个解决方案是更改框大小到 border-box 。但这是css v3。

Another solution is to change the box-sizing to border-box. But this is css v3.

这里有几个例子，我最好的猜测是第三或第二

Here are several examples, my best guess is the 3rd or 2nd solution.

• 演示jsfiddle）

完整screen demo（jsfiddle）

演示响应（jsfiddle）

因此，不会对响应（响应需求 @media 根据堆叠设置边框）做出响应。

As such, will not respond well to responsive (needs @media rules to set the border depending on stacking)

<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：fluid

因此，响应良好。

Solution 2 : fluid

As such, will respond well to responsive

<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： $ c>

因此，对响应性（需要 @media on stack）

Solution 3 : box-sizing

As such, will not respond well to responsive (needs @media rules to set the border depending on stacking)

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

我希望你会找到你的尺寸。

I hope you'll find your size.

这篇关于Twitter BootStrap - 边界推进内容下来的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！