15

简短版本：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-* 类将列向右移动。这些类将列的左边距增加 * 列。” 所以在这种情况下，我有 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 列），但这真的是这样做的方法，还是只是一个怪癖，它可以正常工作？如果需要， bootstrap 似乎几乎可以将偏移量应用于左右两侧，但我找不到任何文档来确认这一点。

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

4

1 回答 1

15

在引导文档中，他们提供了不超过 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>
于 2013-10-04T14:41:14.013 回答