Twitter BootStrap - 向下推送内容的边界 [英] Twitter BootStrap - Border Pushing Contents Down

问题描述

我正在使用页眉、文章和页脚设计 HTML 5 站点.我有一篇文章，在 1px solid black 的左侧和右侧有边框.这足以使 12 列换行，迫使我将应用程序的大小缩小到最大 11 列.这会在右侧留下一个空白区域，我想填充...是否有一种简单的方法可以让 twitter bootstrap 来计算这个额外的 2px?

谢谢.

解决方案

这个已经有人回答了(虽然找不到问题)

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

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

更新

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

• 演示(jsfiddle)

• 全屏演示(jsfiddle)

• 演示响应式 (jsfiddle)

解决方案1:内部

因此，不会很好地响应响应式(需要 @media 规则来根据堆叠设置边框)

<div class="span3"><div class="inner"></div>
<div class="span6"><div class="inner"></div>

<div class="span3"><div class="inner"></div>

.row >[class*=span"]:first-child >.内{左边框:5px 纯红色；}.row >[class*=span"]:last-child >.内{右边框:5px 纯红色；}

解决方案 2:流体

因此，会很好地响应响应

<div class="inner-fluid clearfix"><div class="span3"></div><div class="span6"></div><div class="span3"></div>

.row-fluid >.内流体{边框:5px 无绿色；左边框样式:实心；边框右样式:实心；}

方案三:box-sizing

因此，不会很好地响应响应式(需要 @media 规则来根据堆叠设置边框)

<div class="span3"></div><div class="span6"></div><div class="span3"></div>

.foo [class*=span"] {-webkit-box-sizing: 边框框；-moz-box-sizing: 边框框；-ms-box-sizing: 边框框；box-sizing: 边框框；}.foo.row >[class*=span"]:first-child {左边框:5px 纯橙色；}.foo.row >[class*=span"]:last-child {右边框:5px 纯橙色；}

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

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?

Thanks.

解决方案

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.

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

Update

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

• Demo (jsfiddle)

• Full screen demo (jsfiddle)

• Demo responsive (jsfiddle)

Solution 1 : inners

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

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

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屋！