web-dev-qa-db-ja.com

Bootstrap 3 .col-xs-offset- *は機能しませんか？

bootstrap 3グリッドシステムを使用しています。ここに何が欠けていますか？

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

http://jsfiddle.net/petran/zMcs5/2/

twitter-bootstraptwitter-bootstrap-3
77
Petran

編集：Bootstrap 3.1現在.col-xs-offset-*は存在します、bootstrapを参照： ：グリッドオプション

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

公式ドキュメントを参照してください：bootstrap :: grid options

94
bobybx

または、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

23
Anna T

0のオフセットで上位ピクセルを無効にすることで、xsデバイスのみにオフセットセットを取得できます。そのようです、

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

オフセットをしたいが、非常に狭い幅では自分自身ができないと思う場合の提案：

.hidden-xsと.visible-xsを使用して、1つのバージョンのhtmlブロックを非常に小さい幅に、もう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>
6
myowz

col-md-offset-4は、同じ要素に手動でマージンを適用すると機能しません。例えば

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

6
Shivani

これは本当にイライラしたので、col-offset-xs-*を有効にするGistを作成しました。また、今週インストールされたBootstrap SASSリポジトリBowerにはcol-offset-sm-0が含まれていないことに気付きました。

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

3
Dylan Valade
  /*

  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

2
Evgeny Palguev

Jsfiddleリンクで使用されるbootstrap cssには、col-xs-offset- *のcssがないため、cssが適用されません。最新のbootstrap cssを参照してください。

1
mahESh

メディアクエリでcol-xs-offset-*が指定されているため、機能していません。使用する場合は、すべてのオフセットを指定する必要があります（例：class="col-xs-offset-3 col-sm-offset-2 col-md-offset-1 col-lg-offset-0"）

しかし、これは正しくありません。メディアクエリでcol-xs-offset-*に言及する必要があります

1
Mofarjul

問題は、nameclassの代わりに.nameクラスを入れていることです

0
Andres

Bootstrap 4.xの時点では、col-xs-6はちょうどcol-6

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

すでに試してみました、間違いなく動作します。

0
Mindsect Team

このページにつまずく前に誰かが同じエラーを犯した場合に備えて、つまりCSSリセットルールを追加します（ Eric Meyerによる非常に人気のあるリセット 数百万のWebサイトで使用）afterブートストラップを含む。

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

0
che-azeh

最新のbootstrap v3.3.7に従って、xs-offsetingが許可されています。こちらのドキュメントを参照してください ブートストラップオフセット 。だからあなたは使うことができます

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

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

0
Dante

// bootstrap 4で機能します。ドキュメントにいくつかの変更がありました。プレフィックスcol-は必要ありません。ちょうどoffset-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

0
Vasyl Gutnyk