Bootstrap 3 .col-xs-offset- *不起作用？
我使用bootstrap 3网格系统到目前为止，一切都运行良好，我正在尝试使用col-xs-offset-1，虽然.col-sm-offset-1工作，但不起作用。 我在这里错过了什么？
<div class="col-xs-2 col-xs-offset-1">col</div> http://jsfiddle.net/petran/zMcs5/2/
编辑：作为Bootstrap 3.1 .col-xs-offset-* 确实存在 ，请参阅bootstrap :: grid选项
.col-xs-offset-*不存在。 偏移和列sorting仅适用于小型和更多。 （只有.col-sm-offset-* .col-md-offset-*和.col-lg-offset-* ）
请参阅官方文档： bootstrap :: grid选项
或者，你可以为xs-offset添加一个空的div（将节省你不得不在多个地方pipe理内容）
<div class="col-xs-1 visible-xs"></div><div class="col-xs-2">col</div>
引导开发似乎拒绝添加这些xs- ofsets和推/拉类，请看这里： https : //github.com/twbs/bootstrap/issues/9689
您可以通过使用0偏移量取消较高像素来获得仅用于xsdevise的偏移量设置。 像这样，
class="col-xs-offset-1 col-md-offset-0"
一个build议，当你想要做一个抵消，但发现自己无能为力的特别小：
使用.visible-xs .hidden-xs和.visible-xs来为你的html块创build一个更小的宽度，另一个用于其他所有的（你仍然可以使用偏移量）
例：
<div class="hero container"> <div class="row"> <div class="hidden-xs col-sm-8 col-sm-offset-2 col-md-4 col-md-offset-4 text-center"> <h2>This is a banner at the top of my site. It shows in everything except XS</h2> <p>Here are some supporting details about my banner.</p> </div> <div class="visible-xs col-xs-12"> <h2 class="pull-right">This is my banner at XS width.</h2> <p class="pull-right">This is my supporting content at XS width.</p> </div> </div> </div>
如果您手动将边距应用于相同的元素，col-md-offset-4不起作用。 例如
在上面的代码中，偏移将不会被应用。 而是应用0自动的边距
这真是令人沮丧，所以我写了一个可以抓住启用col-offset-xs-*的要点。 我也注意到本周安装的Bootstrap SASS repo Bower没有包含col-offset-sm-0所以也被删除了，但在很多情况下将会是多余的。
Bootstrap 3 xs补偿垫片
/* Include this after bootstrap.css Add a class of 'col-xs-offset-*' and if you want to disable the offset at a larger size add in 'col-*-offset-0' Examples: All display sizes (xs,sm,md,lg) have an offset of 1 <div class="col-xs-11 col-xs-offset-1 col-sm-3"> xs has an offset of 1 <div class="col-xs-11 col-xs-offset-1 col-sm-offset-0 col-sm-3"> xs and sm have an offset of 1 <div class="col-xs-11 col-xs-offset-1 col-md-offset-0 col-sm-3"> xs, sm and md will have an offset of 1 <div class="col-xs-11 col-xs-offset-1 col-lg-offset-0 col-sm-3"> */ .col-xs-offset-12 { margin-left: 100%; } .col-xs-offset-11 { margin-left: 91.66666666666666%; } .col-xs-offset-10 { margin-left: 83.33333333333334%; } .col-xs-offset-9 { margin-left: 75%; } .col-xs-offset-8 { margin-left: 66.66666666666666%; } .col-xs-offset-7 { margin-left: 58.333333333333336%; } .col-xs-offset-6 { margin-left: 50%; } .col-xs-offset-5 { margin-left: 41.66666666666667%; } .col-xs-offset-4 { margin-left: 33.33333333333333%; } .col-xs-offset-3 { margin-left: 25%; } .col-xs-offset-2 { margin-left: 16.666666666666664%; } .col-xs-offset-1 { margin-left: 8.333333333333332%; } .col-xs-offset-0 { margin-left: 0; } /* Ensure that all of the zero offsets are available - recent SASS version did not include .col-sm-offset-0 */ @media (min-width: 768px) { .col-sm-offset-0, .col-md-offset-0, .col-lg-offset-0 { margin-left: 0; } }
它不工作，因为col-xs-offset-*被提到了媒体查询之外。 如果你想使用它，你必须提及所有的偏移量（例如： class="col-xs-offset-3 col-sm-offset-2 col-md-offset-1 col-lg-offset-0" ）
但这是不对的，他们应该在媒体查询中提到col-xs-offset-*
//它在引导程序4中工作，在文档中有一些变化。我们不需要前缀col-，只是偏移-lg-3 eg
<div class="row"> <div class="offset-lg-3 col-lg-6"> Some content... </div> </div>
// here doc： http : //v4-alpha.getbootstrap.com/layout/grid/#example-offsetting-columns
jsfiddle链接中使用的bootstrap css，没有col-xs-offset- *的css，这就是为什么css没有被应用。 请参阅最新的引导CSS。
问题是你把.name类而不是nameclass
而不是使用col-md-offset-4而不是offset-md-4，在抵消时不再需要使用col。 在你的情况使用offset-xs-1，这将工作。 确保你已经调用了bootstrap.css文件夹到你的html中，如下所示。
根据最新的bootstrap v3.3.7 xs-offseting是允许的。 请参阅文档bootstrap offseting 。 所以你可以使用
<div class="col-xs-2 col-xs-offset-1">.col-xs-2 .col-xs-offset-1</div>
以防万一有人犯了同样的错误，我在这个页面上磕磕绊绊，也就是添加CSS重置规则（比如Eric Meyer在数百万个网站上使用的非常stream行的重置 ） ，包括bootstrap。
另外，也许我应该指出，这样的重置将不必要bootstrap给予bootsrap实际上实现了normalize.css v3.0.2重置。
删除你的课堂上的点，所以看起来像这样：
<div class="col-xs-2 col-xs-offset-1">col</div>
