web-dev-qa-db-ja.com

Twitter Bootstrap 3でcol-lg-Pushとcol-lg-pullを使った列の順番操作

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

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

[5] [5] [2]

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

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

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

[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が何を意味するのか明確にしていません。だから私は何かが足りない？

ありがとう。

csstwitter-bootstrap-3
157
Blaszard

この答えは3つの部分に分かれています。公式リリースについては以下を参照してください（v3とv4）

私がダウンロードしたRC1のcol-lg-Push-xや元のファイルのクラスを見つけることさえできなかったので、あなたの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>

編集：下IS公式リリースv3.0への答え

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

  • col-vp-Push-x =x列数分、列が通常レンダリングされる場所から始めて、列を右にプッシュします - > position: relativevp以上のビューポート。

  • col-vp-pull-x =x列の数だけ列を左に引っ張ります。通常は、列がレンダリングされる場所から開始します - > position: relativevp以上のビューポート。

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

    x= 1から12

ほとんどの人がめちゃくちゃになるのは、HTMLマークアップの列の順序を変更する必要があるということです（下の例では、BがAの前に来る）。指定されたもの以上のビューポートをプッシュまたはプルするだけです。つまり、col-sm-Push-5はsm以上のビューポートでは5列だけプッシュします。これは、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|

編集：下IS v4.0への答え

V4では、flexboxやその他のグリッドシステムへの変更、そしてpush/pullクラスはflexboxの順序付けを使うために削除されました。

  • 視覚的な順序を制御するには.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>
278
Schmalzy

Pullを引くとブラウザの左側にdivが引き寄せられ、Pushを押すとブラウザの左側からDIVが引き出されます。

好きです： enter image description here

そのため、基本的に任意の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/

それが役に立てば幸い

36
DrGeneral

私はちょうど私がそれらの2つの良い答えに私の0.2ドルを加えるつもりであると感じました。 3コラムの状況で、最後のコラムを一番上まで移動しなければならなかった場合がありました。

[A] [B] [C]

に

[C]

[A]

[B]

Boostrapのクラス.col-xx-Push-Xはleft: XX%;で列を右にプッシュする以外に何もしません。したがって、列を右にプッシュするには、左に行く疑似列の数を追加するだけです。

この場合：

  • 2つの列（col-md-5とcol-md-3）が左に移動し、それぞれが右に移動する列の値を持ちます。

  • 1つ（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>

enter image description here

15
Kuba

誤解列の順序付けに関する一般的な誤解は、モバイルデバイスをプッシュプルすること、そしてデスクトップビューがマークアップの自然な順序でレンダリングされることです。これは間違っています。

現実ブートストラップは、モバイル向けの最初のフレームワークです。つまり、HTMLマークアップの列の順番は、モバイルデバイスに表示する順番を表す必要があります。 これはプッシュとプルがより大きなデスクトップビューで行われることを意味します。モバイルデバイスビューではありません。

Brandon Schmalz - フルスタックWeb開発者 ここで完全な説明を見てください

15
Syed Ali

ビューポートのサイズに応じて1/2/4の列にデータを整理する必要がある場合は、プッシュとプルはまったく選択肢にならないかもしれません。あなたが最初にあなたの商品をどのように注文したとしても、サイズの一つはあなたに間違った注文をするかもしれません。

この場合の解決策は、Pushクラスまたはpullクラスを使用せずに、ネストした行と列を使用することです。

例

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の生成に適しています。

2
Jpsy