bootstrap3列加起来少于12是不对的？(或者,理解 - 偏移)

Question

短版本:col-x-offset-n仅应用于左侧,或者它是否适用于左侧和右侧,如果这是它需要制作的12？例如,我可以只使用"col-x-10 col-x-offset-1"来获得一个10列容器,左右两个额外的列？它似乎工作,但这不是文档建议应该发生的.

更长的版本:作为一个例子,我试图使用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>

正如bootstrap文档所说:"使用.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列),但这真的是这样做的方式还是只是一个怪癖它可以正常工作？它似乎像引导将偏移到两个左和右,如果需要,但我无法找到任何文件,以证实这一点.

(也许有了这个简单的例子,有一种更简单的方法来完成我在这里所描述的内容,但是我试图理解-offset是如何工作的,而不仅仅是将一个带有margin的简单div:0 auto或类似的东西.)

Answer 1

在bootstrap文档中,他们提供的示例最多不超过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>