bootstrap3 列加起来小于 12 是错误的吗？ （或者，理解-offset）

Question

短版：col-x-offset-n 是否仅适用于左侧，或者如果这需要制作 12，它是否适用于左侧和右侧？例如，我可以只执行“col-x-10 col-x-offset-1”来获得一个 10 列容器，左右两边都有 1 个额外的列吗？它似乎有效，但这不是文档建议应该发生的事情。

更长的版本：例如，我正在尝试使用 bootstrap 3 网格系统将 div 居中。在 col-xs 尺寸下，我希望它是全宽的，但在此之上，我希望它居中，每边都有更多的填充。当然，所有文档都说列数总共应为 12。所以如果我这样做：

 <div class="container">
    <div class="row">
        <div class="col-sm-1">
        </div>
        <div class="col-sm-10">
            ...content here...
        </div>
        <div class="col-sm-1">
        </div>
    </div>
</div>

它的工作原理与我预期的一样，两个空的 col-sm-1 列在左侧和右侧充当填充物。但我可以使用 -offset 以更少的标记来做到这一点：

<div class="container">
    <div class="row">
        <div class="col-sm-10 col-sm-offset-1">
        ...content here...
        </div>
        <div class="col-sm-1">
        </div>
    </div>
</div>

正如引导文档所说：“使用 .col-md-offset-* 类将列向右移动。这些类将列的 left 边距增加 * 列。”所以在这种情况下，我有 10 列，加上偏移量中的 1 列，加上下面的空 col-sm-1 div 中的 1 列，等于 12 列。

现在最后的问题是：如果我删除最后的空 col-sm-1 div，我仍然会得到相同的结果（页面与之前的两个示例一样居中），但我的列现在只加起来 11。

<div class="container">
    <div class="row">
        <div class="col-sm-10 col-sm-offset-1">
        ...content here...
        </div>
    </div>
</div>

这样可以吗？ Bootstrap 是否只是为我填写最后一列？我想放弃它，只使用“col-sm-10 col-sm-offset-1”或“col-sm-8 col-sm-offset-2”或“col-sm-6 col-sm- offset-3"（尽管它们分别加起来总共只有 11、10 和 9 列），但这真的是这样做的方法，还是只是一个怪癖，它可以正常工作？如果需要，引导程序似乎将偏移量应用于左侧 和 右侧，但我找不到任何文档来确认这一点。

（也许有了这个简单的例子，有一种更简单的方法来做我在这里描述的事情，但我试图理解 -offset 是如何工作的，而不是仅仅将一个简单的 div 居中，margin: 0 auto; 或类似的东西那个。）

Answer 1

在引导文档中，他们提供了不超过 12 个的示例。

这应该是可以接受的：

<div class="container">
    <div class="row">
        <div class="col-sm-10 col-sm-offset-1">
        ...content here...
        </div>
    </div>
</div>

参考http://getbootstrap.com/css/#grid去“偏移列”章节，最后一个例子加起来是9，是一个类似的中心例子。

<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>