引导容器答案

【问题标题】：Bootstrap container引导容器
【发布时间】：2013-08-02 08:07:58
【问题描述】：

我有一个主体背景为灰色的设计，内容位于具有 20 像素填充的白色容器内。

我正在使用 Bootstrap 创建它，但是如果我将这个 20px 填充添加到容器中，那么所有其他 span 元素都不适合...

应该是：

<div class="container"> <!-- this should be white background -->
    <div class="row">
        <div class="span4"></div> <!-- this element should be 20px margin left --> 
        <div class="span4"></div>
        <div class="span4"></div> <!-- this element should be 20px margin right -->
    </row>
</div>

有没有办法用 Bootstrap 创建这种容器？

谢谢。

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

这能解决您的问题吗？

.container {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

【讨论】：

【解决方案2】：

通过Bootstrap Documentation 有几个预定义的类来实现这一点。

试试这个

    <div class="span4 offset1"></div> 
    <div class="span4"></div>
    <div class="span4 offset4"></div>

【讨论】：

【解决方案3】：

一个快速的解决方法是简单地使用row-fluid，而不是row，因为这允许spanN div 划分任何可用的； row 类为您提供固定大小的 span 类。

【讨论】：

【解决方案4】：

首先我想提一下，有一个新的

Bootstrap version (3)

现在可用。如果您仍想使用已安装的版本，请尝试使用该类

row-fluid

而不是行。

offset

类也可以，但可能间距太大...

【讨论】：

我知道 Bootstrap 3，但它有同样的问题，你无法管理容器填充......如果你这样做，跨度不再适合......我不需要使用 row -流体...