Bootstrap 3 .col-xs-offset-*不起作用？

Question

我使用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/

Answer 1

编辑:作为引导3.1 .col-xs-offset-* 确实存在,请参阅引导::网格选项

.col-xs-offset-*不存在.偏移和列排序仅适用于小型和更多.(ONLY .col-sm-offset-*,.col-md-offset-*和.col-lg-offset-*)

请参阅官方文档:bootstrap :: grid选项

Answer 2

或者,您可以为xs-offset添加一个空div(可以节省您在多个地方管理内容)

<div class="col-xs-1 visible-xs"></div><div class="col-xs-2">col</div>

bootstrap devs似乎拒绝添加那些xs-ofsets和push/pull类,请参见此处:https://github.com/twbs/bootstrap/issues/9689

Answer 3

您可以通过取消具有0偏移的较高像素来获得仅针对xs设备的偏移设置.像这样,

class="col-xs-offset-1 col-md-offset-0"

Answer 4

建议您何时想要进行偏移,但发现自己无法获得超小宽度:

使用.hidden-xs和.visible-xs制作一个版本的html块以获得额外的小宽度,并将其中一个用于其他所有版本(您仍然可以使用偏移量)

例:

<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>

Answer 5

如果手动将边距应用于同一元素,则col-md-offset-4不起作用.例如

在上面的代码中,不会应用偏移量.相反,将应用0自动余量