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

时间:2013-09-17 15:01:02

标签: twitter-bootstrap twitter-bootstrap-3

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

16 个答案:

答案 0 :(得分:93)

修改:自Bootstrap 3.1 .col-xs-offset-* 确实存在之后,请参阅 bootstrap :: grid options


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

请参阅官方文档: bootstrap :: grid options

答案 1 :(得分:23)

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

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

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

答案 2 :(得分:12)

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

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

答案 3 :(得分: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>

答案 4 :(得分:6)

如果手动将边距应用于同一元素,则

col-md-offset-4不起作用。例如

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

答案 5 :(得分:3)

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

Bootstrap 3 xs offset shim

答案 6 :(得分: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

答案 7 :(得分:1)

它无效,因为媒体查询中提到了col-xs-offset-*。如果你想使用它,你必须提到所有的偏移量(例如:class="col-xs-offset-3 col-sm-offset-2 col-md-offset-1 col-lg-offset-0"

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

答案 8 :(得分:1)

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

答案 9 :(得分:0)

问题在于你是在放置.name类而不是nameclass

答案 10 :(得分:0)

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

答案 11 :(得分:0)

//它在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

答案 12 :(得分:0)

根据最新的bootstrap v3.3.7,允许使用xs-offseting。请参阅此处的文档bootstrap offseting。所以你可以使用

Google Places API

答案 13 :(得分:0)

万一有人犯了同样的错误,我在此网页上遇到了同样的错误,即添加CSS重置规则(如数百万网站上使用的the very popular reset by Eric Meyer 之后 包括bootstrap。

另外,也许我应该指出,如果bootrap实际上实现了 normalize.css v3.0.2 重置,那么bootstrap不需要这样的重置。

答案 14 :(得分:0)

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

offset-xs-6 现在仅为 offset-6

已经尝试过,绝对可以。

答案 15 :(得分:-3)

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

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