web-dev-qa-db-ja.com

Bootstrap 3：オフセットが機能していませんか？

私はこのコードを持っています：

<div class="row">
  <div class="col-sm-3 col-sm-offset-6 col-md-12 col-md-offset-0"></div>
  <div class="col-sm-3 col-md-12"></div>
</div>

小さい（sm）画面に必要なのは、それぞれ3列の2つのdivを持ち、最初のdivに6列のオフセットがあることです。

中（md）画面の場合、オフセットがなく、それぞれ12列（一方が他方の下に水平に積み上げられている）の2つのdivが必要です。

どういうわけか、ブラウザはクラスcol-md-offset-0を認識しません。まだcol-sm-offset-6クラスを使用しています。なぜアイデアがありますか？

twitter-bootstrap-3offset
18
David

bootstrap=のどのバージョンを使用していますか？初期バージョンのBootstrap 3（3.0、3.0.1）はこの機能では動作しませんでした。

col-md-offset-0は、このように動作するはずですbootstrap=ここにある例（ http://getbootstrap.com/css/#grid-responsive-resets =）：

<div class="row">
   <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
   <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>
35
Overachiever

私があなたを正しいと思うなら、あなたは通常望まれているものの反対のように見える何かが欲しいです：あなたは小さなスクリーンのための水平レイアウトと大きなスクリーン上の垂直に積み重ねられた要素が欲しいです。これは次のような方法で実現できます。

<div class="container">
    <div class="row">
        <div class="hidden-md hidden-lg col-xs-3 col-xs-offset-6">a</div>
        <div class="hidden-md hidden-lg col-xs-3">b</div>
    </div>
    <div class="row">
        <div class="hidden-xs hidden-sm">c</div>

    </div>
</div>

小さな画面、つまりxsとsmでは、これにより、オフセット6の2つの列を持つ1つの行が生成されます。大きな画面、つまりmdとlgでは、2つの縦に積み上げられた要素が全幅（12列）で生成されます。

0
Clifton Morris

Col-??-offset-0はありません。すべての「行」は、指定されていない限りオフセットがないことを前提としています。小さな画面で3行、中画面で1行が必要だと思います。

結果を得るには、あなたが探していると思いますこれを試してください：

<div class="container">
    <div class="row">
      <div class="col-sm-4 col-md-12">
        <p>On small screen there are 3 rows, and on a medium screen 1 row</p>
      </div>
      <div class="col-sm-4 col-md-12">
        <p>On small screen there are 3 rows, and on a medium screen 1 row</p>
      </div>
      <div class="col-sm-4 col-md-12">
        <p>On small screen there are 3 rows, and on a medium screen 1 row</p>
      </div>
    </div>
  </div>

あなたが説明したものと小さなタブレットでのみ違いを見ることに注意してください。列が12に及ぶ中規模、大規模、および超小型の画面。

お役に立てれば。

0
zach57