81

到目前为止，我正在使用 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/

4

16 回答 16

100

编辑：自 Bootstrap 3.1 起.col-xs-offset-* 确实存在，请参阅bootstrap :: 网格选项

.col-xs-offset-*不存在。偏移量和列排序仅适用于小型和更多。（仅.col-sm-offset-*,.col-md-offset-*和.col-lg-offset-*）

请参阅官方文档：bootstrap :: 网格选项

于 2013-09-17T15:46:14.233 回答
26

Alternatively, you can add an empty div for the xs-offset (would save you having to manage the content in more than one place)

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

The bootstrap devs seem to be refusing to add those xs- ofsets and push/pull classes, see here: https://github.com/twbs/bootstrap/issues/9689

于 2013-12-23T15:56:36.423 回答
12

您可以通过用 0 偏移取反较高像素来获得仅为 xs 设计的偏移设置。像这样，

class="col-xs-offset-1 col-md-offset-0"
于 2014-08-11T02:43:50.270 回答
6

当您想要进行偏移但发现自己无法在超小的宽度下进行时的建议：

使用.hidden-xsand.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>
于 2013-10-28T19:17:19.893 回答
6

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

在上面的代码中，不会应用偏移量。而是应用 0 auto 的边距

于 2015-12-30T09:41:19.447 回答
3

这真的很令人沮丧，所以我写了一个你可以抓住的要点col-offset-xs-*。我还注意到本周安装的 Bootstrap SASS repo Bower 不包括在内col-offset-sm-0，因此它也被填充，但在许多情况下将是多余的。

Bootstrap 3 xs 偏移垫片

于 2013-11-07T22:16:11.830 回答
2 
  /*

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

https://gist.github.com/dylanvalade/7362739

于 2015-07-18T20:57:19.737 回答
2

从 Boostrap 4.x 开始，就像col-xs-6现在只是col-6

offset-xs-6现在只是offset-6（col-lg-offset-2现在是offset-lg-2）。

已经试过了，绝对有效。

于 2019-03-07T21:40:53.867 回答
1

它不起作用，因为col-xs-offset-*在媒体查询中提到了。如果你想使用它，你必须提到所有的偏移量（例如class="col-xs-offset-3 col-sm-offset-2 col-md-offset-1 col-lg-offset-0"：）

但这是不对的，他们应该col-xs-offset-*在媒体查询中提及

于 2014-08-16T10:27:30.390 回答
1

jsfiddle 链接中使用的引导 css，没有 col-xs-offset-* 的 css，这就是未应用 css 的原因。请参阅最新的引导 css。

于 2017-02-03T13:51:07.787 回答
0

问题是你把 .name 类而不是 nameclass

于 2014-10-26T01:55:25.380 回答
0

而不是使用 col-md-offset-4 而是使用 offset-md-4，当你偏移时你不再需要使用 col。在您的情况下，使用 offset-xs-1 这将起作用。确保您已将 bootstrap.css 文件夹调用到您的 html 中，如下所示。

于 2016-08-06T07:18:19.530 回答
0

以防万一有人犯了我在这个页面上绊倒之前犯过的同样错误，即在包含引导程序之后CSS添加重置规则（例如Eric Meyer在数百万网站上使用的非常流行的重置）。

另外，也许我应该指出，由于 bootsrap 实际上实现了normalize.css v3.0.2重置，因此使用引导程序不需要这种重置。

于 2017-03-28T22:34:35.097 回答
0

根据最新的 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>
于 2017-02-03T05:37:08.600 回答
0

// 它在 bootstrap 4 中工作，文档中有一些变化。我们不需要前缀 col-，只需要offset-lg-3例如

<div class="row">
   <div class="offset-lg-3 col-lg-6"> Some content...
   </div>
</div>

// 这里文档：http: //v4-alpha.getbootstrap.com/layout/grid/#example-offsetting-columns

于 2016-09-26T13:44:13.223 回答
-3

删除班级前面的点，使其看起来像这样：

<div class="col-xs-2 col-xs-offset-1">col</div>
于 2015-06-24T23:56:25.280 回答