81

私はブートストラップ 3 グリッド システムをこれまでのところ愛用しており、すべてがうまく機能していました。ここで何が欠けていますか?

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

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

4

16 に答える 16

26

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

于 2013-12-23T15:56:36.423 に答える
3

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

Bootstrap 3 xs オフセット シム

于 2013-11-07T22:16:11.830 に答える
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

于 2015-07-18T20:57:19.737 に答える
1

col-xs-offset-*がメディアクエリから言及されているため、機能していません。使用する場合は、すべてのオフセットについて言及する必要があります (例: class="col-xs-offset-3 col-sm-offset-2 col-md-offset-1 col-lg-offset-0")

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

于 2014-08-16T10:27:30.390 に答える
0

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

于 2016-08-06T07:18:19.530 に答える
0

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

于 2014-10-26T01:55:25.380 に答える
0

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

<div class="col-xs-2 col-xs-offset-1">.col-xs-2 .col-xs-offset-1</div>
于 2017-02-03T05:37:08.600 に答える