web-dev-qa-db-ja.com

列のプッシュとプル-Bootstrap 4

これは私が必要とするものです：

デスクトップ：B A

モバイル：

A
B

これが私のHTMLです。

<div class="row">

    <div class="col-md-7 col-sm-7 Push-md-5">
        A
    </div>

    <div class="col-md-5 col-sm-5 pull-md-7">
        B
    </div>

</div>

モバイルデバイスでは正しい順序ですが、デスクトップでは正しくありません。私はいくつかのガイドを試し、資料を手伝いましたが、運はありません。ほとんどのガイドでは、4または6のように等しい列を移動しているため、明確に理解するのは少し混乱します。

twitter-bootstrapbootstrap-4grid-layout
6
Alena

最新のBootstrap v4.xPush-*およびpull-*クラスが 置き換えられるorder-*クラス。

.order-クラスを使用して、コンテンツの視覚的な順序を制御します。これらのクラスはレスポンシブなので、ブレークポイントで順序を設定できます（例：.order-1.order-md-2）。 5つのグリッド層すべてで1〜12のサポートが含まれます。

詳細と例は こちらにあります

これは、あなたの例（そして答え）：

    <div class="row">
        <div class="col-md-7 Push-md-5">
            A
        </div>

        <div class="col-md-5 pull-md-7">
            B
        </div>
    </div>

になる：

    <div class="row">
        <div class="col-md-7 order-md-5">
            A
        </div>

        <div class="col-md-5 order-md-7">
            B
        </div>
    </div>

そして、質問で与えられた例で、それはうまくいくでしょう。

ただし、、以下のコメントで言及されているように、注文クラスはorder-md-5およびorder-md-7を使用する必要はありません。最大12列の位置決めを完全に制御できるようにすること以外は、グリッドシステムにバインドされていません。

これは、order-md-1とorder-md-2の方がより適切なソリューションであることを意味します。

次のようなヘルパーもあります。

    <div class="container">
      <div class="row">
        <div class="col order-last">
          First, but last
        </div>
        <div class="col">
          Second, but unordered
        </div>
        <div class="col order-first">
          Third, but first
        </div>
      </div>
    </div>
15
DazBaldwin

ここで受け入れられた答えは、orderクラスが何をするかを誤って示しています。これは、CSS orderプロパティを介して、flexコンテナ内の柔軟なアイテムの順序を制御するだけです。それらはnotPush-*およびpull-*クラスですが、列の並べ替えに最適です。

BS4クラスを探していることを達成するには、以下を行う必要があります。

<div class="col-sm-7 col-md-7 order-md-2">
    A, shows first on mobile, second on desktop
</div>
<div class="col-sm-5 col-md-5 order-md-1">
    B, shows second on mobile, first on desktop
</div>

migration docs for BootStrap 4.に従ってください。 CSS order property も参照してください。

2
rsigg

上記の答えは役に立ちますが、私は自分の質問にもう少し詳しく答えているので、将来誰にも役立つかもしれません。 :)

問題：実際、私のテクニックは正しいが間違った仮定でした。私が考えていた、 col-sm-*は、モバイルデバイスに適用されます。しかし、このクラスは> 576pxデバイスを選別します。

これは、グリッドの分類です：（V4 Alpha 6）

  • 非常に小さい：<576px .col-
  • Small：≥576px.col-sm-
  • メディア：≥768px.col-md-
  • 大：≥992px.col-lg-
  • 特大：≥1200px.col-xl-

参照Bootstrap 4 Alpha

テクニック：

  1. 最初にモバイル画面用のHTMLを作成します（例：A B）
  2. プッシュとプルを使用して大画面デバイス（例：B A）

これが私の問題に役立つコードです。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

<div class="container-fluid">

  <div class="row">

        <div class="col-md-7 Push-md-5">
                A
        </div>
        
        <div class="col-md-5 pull-md-7">
                B
        </div>

</div>

</div>
2
Alena

ここでは解決策を紹介します https://jsfiddle.net/kzmz7qaL/1/

.div1{ 
  background: blue;
  color: #fff;
}

.div2 {
  background: red;
  color: #fff;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">

  <div class="row">

    <div class="col-md-7 col-sm-7 Push-sm-5 div1">
        A
    </div>

    <div class="col-md-5 col-sm-5 pull-sm-7 div2">
        B
    </div>

  </div>

</div>

私はこれがあなたが探しているものだと思います...中画面（md）ではなく、小画面（sm）のプル＆プッシュを変更しました

Pullは左の値で動作します（col値が指定されています）

Pushは右から動作します（col値が指定されています）

0
Shiladitya

ブートストラップの「小さい」（sm）サイズは、768〜992ピクセルの範囲をカバーします。 「中」（md）は992から1200ピクセルです。 （ Bootstrap 4 alpha のリファレンス）。

class="col-md-7 col-sm-7 Push-md-5"を使用して、画面が992ピクセルよりも広いときにプッシュが発生するように定義します。幅が768〜992ピクセルの画面はcol-sm-7設定を使用するだけで、さらに小さい画面だけが全幅を使用するデフォルトを使用します。

したがって、非常に小さい画面（<576ピクセル）の場合、Aの上にBが表示されます。小さな画面の場合（sm設定を使用）、プッシュ/プルされないため、A Bが表示されます。そして、大画面（> 992ピクセル、mdクラスを使用）の場合のみ、B Aが表示されます。

修正するには、他の人が提案しているように、md-クラスを取り除き、pull/Push-classesをsm- variantsに置き換えてください。

0
cello

Col-md-Push-5およびcol-md-pull-7クラスは、Bootstrap 4には含まれませんが、Bootstrap Extensionは含まれます。- http://bootstrap-extension.com/#gridsystem

解決：

<div class="row">

<div class="col-md-7 col-sm-7 col-md-Push-5">
    A
</div>

<div class="col-md-5 col-sm-5 col-md-pull-7">
    B
</div>
0
William A.