Twitter bootstrap 引导3.列xs偏移量-*不'；不行？

我使用的是bootstrap 3网格系统，到目前为止我非常喜欢它，一切都很好， 我正在尝试使用col-xs-offset-1，但不起作用。col-sm-offset-1起作用。 我错过了什么

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

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

col

---

编辑：自Bootstrap 3.1

起，列xs偏移量-*

确实存在，请参见

---

---

.col xs offset-*

不存在。 偏移量和列顺序仅适用于较小和更大的对象。（仅

.col sm offset-*

，

.col md offset-*

和

.col lg offset-*

）

---

请参阅官方文档：当您想要进行偏移，但发现自己无法进行超小宽度时，建议：

使用

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

这是我网站顶部的一条横幅。它显示在除XS以外的所有内容中
下面是一些关于我的旗帜的支持细节

这是我的横幅在XS宽度。
这是我在XS宽度的支持内容

这确实令人沮丧，所以我写了一个要点，您可以抓住它启用

列偏移量xs-*

。我还注意到，本周安装的Bootstrap SASS repo Bower不包括

col-offset-sm-0

，因此也加了垫片，但在许多情况下是多余的

---

或者，您可以为xs偏移量添加一个空div（这样您就不用在多个位置管理内容了）

col

---

引导开发人员似乎拒绝添加那些xs-OFSET和推/拉类，请参见此处：

您可以通过使用0偏移对较高像素求反来获得xs设备的偏移集。 这样,

---

它不起作用，因为

列xs偏移量-*

是在媒体查询中提到的。如果你想使用它，你必须提到所有的偏移量（例如：

class=“col-xs-offset-3 col-sm-offset-2 col-md-offset-1 col-lg-offset-0”

）

---

但这是不对的，他们应该在媒体查询中提到

列xs偏移量-*

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

删除类前面的点，因此看起来是这样的：

col

/*
在bootstrap.css之后包括这个
添加一个“col xs offset-*”类，并
如果要禁用较大尺寸的偏移，请添加“col-*-offset-0”
示例：
所有显示器尺寸（xs、sm、md、lg）的偏移量均为1
xs的偏移量为1
xs和sm的偏移量为1
xs、sm和md的偏移量为1
*/
.col-xs-offset-12{
左边距：100%；
}
.col-xs-offset-11{
左缘：91.6666%；
}
.col-xs-offset-10{
左缘：83.33334%；
}
.col-xs-offset-9{
左边缘：75%；
}
.col-xs-offset-8{
左边距：66.6666%；
}
.col-xs-offset-7{
左缘：58.333336%；
}
.col-xs-offset-6{
左边距：50%；
}
.col-xs-offset-5{
左边距：41.666.7%；
}
.col-xs-offset-4{
左边距：33.33333%；
}
.col-xs-offset-3{
左边缘：25%；
}
.col-xs-offset-2{
左边距：16.66664%；
}
.col-xs-offset-1{
左边距：8.33333.2%；
}
.col-xs-offset-0{
左边距：0；
}
/*确保所有零偏移都可用-最新SASS版本不包括。col-sm-offset-0*/
@介质（最小宽度：768px）{
.col-sm-offset-0，
.col-md-offset-0，
.col-lg-offset-0{
左边距：0；
}
}

---

col-md-offset-4在手动将边距应用于同一元素时不起作用。比如说

---

在上述代码中，将不应用偏移量。相反，将应用0自动边距

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

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

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

一些内容。。。

//这里是文件：

---

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

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

.col-xs-2.col-xs-offset-1

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

以防有人犯了与我在本页上绊倒之前犯的相同的错误，即在包含引导后添加

css

重置规则（如在数百万网站上使用的规则）

---

另外，也许我应该指出，如果bootstrap实际上实现了normalize.css v3.0.2重置，那么这种重置对于bootstrap来说是不必要的。

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

offset-xs-6现在只是offset-6

---

已经试过了，肯定能用。

我不确定这个链接现在是否被更新的文档所取代，但它指出偏移量适用于每种设备大小。但它仍然无法工作，因此我认为它仍然不受支持：（“.col xs offset-*”现在似乎工作正常。

。col xs offset-*

确实存在于引导程序3中。以上所有答案都是错误的，我可以向您保证，对于存在此问题的任何人，都是最好的答案。@Vixed答案并没有过期，因为问题清楚地指向引导程序v3。请参阅current。有关在v4中删除的

-xs

，请参阅。我知道你是对的，但现在没有人发布替代方案；）@Vixed我不愿意为v3问题添加v4答案。相反，我编辑了，因为这是一个关于

  /*

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

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

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