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



我正在使用引导 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-*确实存在,请参阅引导程序 :: 网格选项


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

查看官方文档:引导程序 :: 网格选项

或者,您可以为 xs 偏移量添加一个空的div(这样可以省去在多个位置管理内容的麻烦)

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

引导开发人员似乎拒绝添加那些 xs- ofset 和推/拉类,请参阅此处:https://github.com/twbs/bootstrap/issues/9689

您可以通过否定偏移量为 0 的较高像素来仅获得 xs 设计的偏移集。这样

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

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

使用

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

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

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

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

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

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

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

。偏移量-

XS-6 现在只是偏移量-6col-lg-offset-2现在是 offset-lg-2 个)。

已经尝试过了,绝对有效。

它不起作用,因为媒体查询中提到了col-xs-offset-*。 如果要使用它,则必须提及所有偏移量(例如:class="col-xs-offset-3 col-sm-offset-2 col-md-offset-1 col-lg-offset-0"

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

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

问题是你把 .name class 而不是 nameclass 放了

而不是使用 col-md-offset-4

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

//它在 bootstrap 4 中工作,文档有一些变化。我们不需要前缀 col-,只需要偏移量-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

根据最新的引导程序 v3.3.7,允许 xs 偏移。请参阅此处的文档引导偏移。所以你可以使用

<div class="col-xs-2 col-xs-offset-1">.col-xs-2 .col-xs-offset-1</div>
以防

万一有人犯了我在偶然发现此页面之前所犯的相同错误,即在包含引导程序后添加CSS重置规则(例如 Eric Meyer 在数百万个网站上使用的非常流行的重置)。

另外,也许我应该指出,引导程序不需要这种重置,因为 bootsrap 实际上实现了规范化.css v3.0.2 重置。

删除类前面的点,使其如下所示:

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

最新更新