短版本: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列),但是这真的是这样做的方式还是只是一个怪癖它可以正常运行?看起来似乎bootstrap将偏移应用于左侧 和 如果需要的权利,但我找不到任何文件来证实这一点。
(也许有了这个简单的例子,有一种更简单的方法可以做我在这里描述的内容,但是我试图理解-offset是如何工作的,而不仅仅是以一个简单的div为中心:0 auto;或类似的东西。)