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-* 存在します、bootstrap ::グリッドオプションを参照してください

.col-xs-offset-*存在しません。オフセットと列の順序は、小さいものとそれ以上のものだけです。（のみ.col-sm-offset-*、.col-md-offset-*および.col-lg-offset-*）

公式ドキュメントを参照してください：ブートストラップ::グリッドオプション

または、xs-offsetに空のdivを追加することもできます（コンテンツを複数の場所で管理する必要がなくなります）

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

ブートストラップ開発者は、これらのxs-ofsetsおよびpush / pullクラスの追加を拒否しているようです。https：//github.com/twbs/bootstrap/issues/9689を参照してください。

オフセットが0の上位ピクセルを否定することにより、xsデバイスに対してのみオフセットセットを取得できます。そのようです、

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

オフセットを実行したいが、非常に狭い幅では実行できない場合の提案：

を使用.hidden-xsし.visible-xsて、HTMLブロックの1つのバージョンを非常に狭い幅用に作成し、もう1つを他のすべてのバージョン用に作成します（オフセットを引き続き使用できます）

例：

<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は機能しません。例えば

上記のコードでは、オフセットは適用されません。代わりに、0autoのマージンが適用されます

これは本当にイライラしたので、私はあなたがそれを可能にするためにつかむことができる要点を書きましたcol-offset-xs-*。また、今週インストールされたBootstrap SASSリポジトリBowerには含まcol-offset-sm-0れていないため、これもシムされていますが、多くの場合冗長になることに気付きました。

ブートストラップ3xsオフセットシム

  /*

  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

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を参照してください。

Boostrap 4.x以降、col-xs-6がcol-6になったのと同じように

offset-xs-6はoffset-6になりました。

すでに試してみましたが、間違いなく機能します。

問題は、nameclassの代わりに.nameクラスを配置していることです。

col-md-offset-4を使用する代わりにoffset-md-4を使用する代わりに、オフセットするときにcolを使用する必要がなくなりました。あなたの場合、offset-xs-1を使用すれば、これは機能します。次のように、bootstrap.cssフォルダーをhtmlに呼び出したことを確認してください。

//それは、ブートストラップ4で動作し、documentation.Weのいけない必要性接頭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.7xsに従って、オフセットが許可されます。こちらのドキュメントを参照してください。ブートストラップオフセット。だからあなたは使うことができます

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

念のために誰かが追加して、私はこのページにつまずく前と同じエラー、あるになりますCSS（のようにリセットルールをエリック・メイヤーによって非常に人気のリセットは、ウェブサイトの何百万人に使用される）の後にブートストラップを含めた。

また、bootsrapが実際にnormalize.css v3.0.2リセットを実装している場合、このようなリセットはブートストラップでは必要ないことを指摘しておく必要があります。

クラスの前にあるドットを削除して、次のようにします。

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