163

私は現在、Twitter Bootstrap 3 のドキュメントを読んでおり、 このページに示されている列の順序に従おうとしまし たが、壁にぶつかりました。なぜそのようなコードが機能するのか、設定を正しく指定する方法がわかりません。表示したいのは、長さ 5 のグリッドと長さ 5 のグリッド、そして最後に長さ 2 のグリッドです。

だから私のものは次のようなものです：

[5] [5] [2]

そして、私が達成したいのは、デスクトップで表示すると上記のレイアウトが表示されますが、モバイルで表示すると、2番目の長さ5のオブジェクトを最初に表示し、次に最初の長さ5のオブジェクト、最後に長さ2のオブジェクトを表示したいということです、垂直に。このような：

[5] (second)
[5] (first)
[2]

上記のドキュメントで説明されている手順に従おうとしたときに、モバイル プラットフォーム上にあるにもかかわらず、最初の長さ 5 のオブジェクトが 2 番目のオブジェクトよりも上に表示されました。言い換えれば、私はこれを得ました：

[5] (first)
[5] (second)
[2]

では、どうすれば最初のものの上に2番目のものを正しく置くことができますか? または、同じ長さのオブジェクトを使用しているため、列の順序が機能しない可能性がありますか?

あなたの情報のための私のコードは次のとおりです。

<div class='row'>
<div class='col-lg-5 col-lg-push-5'></div>
<div class='col-lg-5 col-lg-pull-5'></div>
<div class='col-lg-2'></div>
</div>

pullまた、ドキュメントは何を意味するのかを明確にしませんpush。それで、私は何かを逃していますか？

ありがとう。

4

5 に答える 5

287

この回答は 3 つの部分に分かれています。公式リリース (v3 および v4) については以下を参照してください。

ダウンロードした RC1 の元のファイルに col-lg-push-x または pull クラスが見つからなかったので、bootstrap.css ファイルを確認してください。うまくいけば、これは RC2 で整理されるものです。

いずれにせよ、col-push-* および pull クラスは存在し、これはニーズに合っています。ここにデモがあります

<div class="row">
    <div class="col-sm-5 col-push-5">
        Content B
    </div>
    <div class="col-sm-5 col-pull-5">
        Content A
    </div>
    <div class="col-sm-2">
        Content C
    </div>
</div>

編集: 以下は、公式リリース v3.0 の回答です。

この件に関するこのブログ投稿も参照してください

  • col-vp-push-x= vpまたはより大きなビューポートで、列が通常レンダリングされる場所から開始して、x列数だけ右に列をプッシュします。position: relative

  • col-vp-pull-x= vpまたはより大きなビューポートで、列が通常レンダリングされる場所から開始して、x列数だけ左に列を引っ張ります。position: relative

    vp = xs、sm、md、または lg

    x = 1 ～ 12

ほとんどの人を混乱させているのは、HTML マークアップの列の順序を変更する必要があり (以下の例では、B が A の前に来る)、ビューポートのプッシュまたはプルのみを行うことです。指定されたもの以上。つまり、ビューポート以上col-sm-push-5で 5 列のみをプッシュします。smこれは、Bootstrap が「モバイル ファースト」のフレームワークであるためです。そのため、HTML はサイトのモバイル バージョンを反映する必要があります。押したり引いたりは、大きな画面で行われます。

  • (デスクトップ) 大きなビューポートは押したり引いたりします。
  • (モバイル) 小さいビューポートは通常の順序でレンダリングされます。

デモ

<div class="row">
    <div class="col-sm-5 col-sm-push-5">
        Content B
    </div>
    <div class="col-sm-5 col-sm-pull-5">
        Content A
    </div>
    <div class="col-sm-2">
        Content C
    </div>
</div>

ビューポート >= sm

|A|B|C|

ビューポート < sm

|B|
|A|
|C|

編集：以下はv4.0の答えです

v4 では、フレックスボックスとグリッド システムへのその他の変更が行われ、フレックスボックスの順序付けを使用するために、push\pull クラスが削除されました。

  • クラスを使用.order-*して視覚的な順序を制御します (* = 1 ～ 12)
  • これは、グリッド層固有の場合もあります.order-md-*
  • .order-first(-1) と.order-last(13)も利用可能

<div class="row">
  <div class="col order-2">1st yet 2nd</div>
  <div class="col order-1">2nd yet 1st</div>
</div>

于 2013-08-06T01:04:45.517 に答える
36

Pull は div をブラウザの左側に「引っ張り」、Push は div をブラウザの左側から「押し出します」。

お気に入り： ここに画像の説明を入力

したがって、基本的に、Web ページの 3 列のレイアウトでは、「本体」が「中央」に表示され、「モバイル」ビューでは「本体」がページの「上部」に表示されます。これは、3 列のレイアウトを使用しているすべての人に最も望まれています。

<div class="container">
    <div class="row">
        <div id="content" class="col-lg-4 col-lg-push-4 col-sm-12">
        <h2>This is Content</h2>
        <p>orem Ipsum ...</p>
        </div>

        <div id="sidebar-left" class="col-lg-4  col-sm-6 col-lg-pull-4">
        <h2>This is Left Sidebar</h2>
        <p>orem Ipsum...</p>
        </div>


        <div id="sidebar-right" class="col-lg-4 col-sm-6">
        <h2>This is Right Sidebar</h2>
        <p>orem Ipsum.... </p>
        </div>
    </div>
</div>

ここで表示できます: http://jsfiddle.net/DrGeneral/BxaNN/1/

それが役に立てば幸い

于 2013-08-11T08:18:39.460 に答える
16

誤解 列の順序付けに関する一般的な誤解は、モバイル デバイスでプッシュとプルを実行する必要がある (または実行できる) こと、およびデスクトップ ビューはマークアップの自然な順序でレンダリングする必要があることです。これは間違っています。

Reality Bootstrap は、モバイル ファーストのフレームワークです。これは、HTML マークアップ内の列の順序が、モバイル デバイスに表示する順序を表す必要があることを意味します。これは、プッシュとプルがより大きなデスクトップ ビューで行われることを意味します。モバイル デバイス ビューではありません。

Brandon Schmalz - フルスタック Web 開発者 詳細な説明はこちら

于 2016-04-13T22:53:06.683 に答える
15

この 2 つの良い回答に 0.2 ドルを追加するような気がしました。3 列の状況で最後の列を一番上に移動しなければならない場合がありました。

[A][B][C]

に

[ハ]

[あ]

[B]

Boostrap のクラス.col-xx-push-Xは、列を右にプッシュする以外に何もしないleft: XX%; ので、列を右にプッシュするために必要なことは、左に行く疑似列の数を追加することだけです。

この場合：

  • 2 つの列 (col-md-5およびcol-md-3) が左に移動し、それぞれに右に移動する列の値が入ります。

  • one( col-md-4) は、左に行く最初の 2 つの合計 (5+3=8) だけ右に行きます。

<div class="row">
    <div class="col-md-4 col-md-push-8 ">
        C
    </div>
    <div class="col-md-5 col-md-pull-4">
        A
    </div>
    <div class="col-md-3 col-md-pull-4">
        B
    </div>
</div>

ここに画像の説明を入力

于 2014-11-05T16:21:25.453 に答える
2

ビューポートのサイズに応じて 1 / 2 / 4 の列でデータを編成する必要がある場合、プッシュとプルはまったくオプションではない場合があります。そもそもどのように商品を注文しても、サイズの 1 つが間違った注文になる場合があります。

この場合の解決策は、プッシュ クラスまたはプル クラスを使用せずに、ネストされた行と列を使用することです。

例

XSで欲しい...

A
B
C
D
E
F
G
H

SMでしたい...

A   E
B   F
C   G
D   H

MD以上であなたが望む...

A   C   E   G
B   D   F   H


解決

ネストされた 2 列の子要素を、周囲の 2 列の親要素で使用します。

ここに作業スニペットがあります：

<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript" ></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="row">
  <div class="col-sm-6">
    <div class="row">
      <div class="col-md-6"><p>A</p><p>B</p></div>
      <div class="col-md-6"><p>C</p><p>D</p></div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="row">
      <div class="col-md-6"><p>E</p><p>F</p></div>
      <div class="col-md-6"><p>G</p><p>H</p></div>
    </div>
  </div>
</div>

このソリューションのもう 1 つの利点は、項目が自然な順序 (A、B、C、... H) でコードに表示され、シャッフルする必要がないことです。これは CMS 生成に適しています。

于 2016-07-20T15:49:07.607 に答える