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

80

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

twitter-bootstrap twitter-bootstrap-3

— 彼得兰
source

1

@Vixed答案不是过时的，因为问题显然是针对Bootstrap v3的。看到当前的主人。要-xs在v4中删除，请参阅this。

— 陶

我知道您是对的，但现在没有人发布替代方法;）

— 修复了

@Vixed我不愿意在v3问题上添加v4答案。相反，我编辑了这个答案，因为它是关于col-xs-*类的v4问题。

— 陶

99

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

.col-xs-offset-*不存在。偏移量和列顺序仅适用于较小的对象。（ONLY .col-sm-offset-*，.col-md-offset-*和.col-lg-offset-*）

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

— bobybx
source

12

我不确定此链接是否现在已被较新的文档取代，但它指出偏移量适用于每种设备尺寸。但是它仍然不起作用，所以我想仍然不支持它：(

— DanH 2014年

2

“ .col-xs-offset- *”现在似乎工作正常。

— Senthil 2014年

6

.col-xs-offset-*确实存在于引导3

— Dio

26

另外，您可以为xs-offset添加一个空的div（这样可以避免您必须在多个位置管理内容）

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

引导开发人员似乎拒绝添加这些xs-offset和push / pull类，请参见此处：https : //github.com/twbs/bootstrap/issues/9689

— 安娜·T
source

12

通过将零偏移量抵消较高的像素，可以获得仅针对xs装置的偏移量设置。像这样

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

— 坦尼克
source

6

当您想进行补偿但发现自己无法使用较小的宽度时的建议：

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

— ow
source

6

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

在上面的代码中，将不应用偏移。而是将应用自动0的边距

— 西瓦尼
source

3

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

Bootstrap 3 xs偏移垫片

— 迪伦·瓦拉德（Dylan Valade）
source

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

— 叶夫根尼·帕尔格夫（Evgeny Palguev）
source

1

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

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

— Mofarjul
source

1

//它可以在bootstrap 4中运行，但文档上有所更改。我们不需要前缀col-，而只需要offset-lg-3例如

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

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

— 瓦西尔·古特尼克（Vasyl Gutnyk）
source

我相信OP正在询问xs偏移量，而不是一般的偏移量。我在文档中找不到有关xs偏移的任何信息，也无法通过在DOM中添加xs偏移类来触发它。希望我错了，但我无法弄清楚。

— 杰森·弗莱

@JasonFry大声笑我不在乎，但是我描述了一般解决方案问题是什么问题：）

— Vasyl Gutnyk

1

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

— h
source

1

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

offset-xs-6现在就是offset-6。

已经尝试过，绝对可以。

— 思维团队
source

0

问题是您要放置.name类而不是nameclass

— 安德烈斯
source

0

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

— 但丁
source

上面所有这些答案都是错误的，我可以向您保证对存在此问题的任何人都是最好的答案。

— 但丁

0

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

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

— 阿迪（Adeeb Basheer）
source

0

以防万一有人犯了与我在踏上本页前所犯的相同错误，即在添加了引导程序后添加了CSS重置规则（例如，Eric Meyer在数百万个网站上使用的非常流行的重置）。

另外，也许我应该指出，由于bootsrap实际上实现了normalize.css v3.0.2重置，因此对于bootstrap而言，这种重置将不是必需的。

— 塞德里克·伊普斯（Cedric Ipkiss）
source

-3

删除班级前面的点，如下所示：

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

— ReduxDJ
source