モバイル上でブートストラップ要素をレスポンシブに並べ替える方法

モバイル並べ替えを使用してブートストラップ要素を応答的に順序付ける

ブートストラップでは、列の順序を管理することが応答性の高いレイアウトにとって重要です。ただし、モバイルで希望の順序を達成するには、課題が生じることがあります。

初期コード:

<div class="row">
  <div class="col-lg-4">
    <div class="row">
      <div class="col-lg-12">1</div>
      <div class="row">
        <div class="col-lg-12">3</div>
      </div>
    </div>
  </div>
  <div class="col-lg-8 order-lg-first">2</div>
</div>

問題:

このコードは、モバイルでは次の順序になります: 望ましい 1、2、ではなく、1、3、2 3.

解決策 1: 大画面でフレックスボックスを無効にする

ブートストラップはフレックスボックスを使用し、列の高さを等しくします。モバイルで列を再配置するには、大きな画面 (デスクトップなど) でフレックスボックスを無効にすることができます。

<div class="row d-flex d-lg-block">
  <div class="col-lg-8 order-1 float-left">
    <div class="card card-body tall">2</div>
  </div>
  <div class="col-lg-4 order-0 float-left">
    <div class="card card-body">1</div>
  </div>
  <div class="col-lg-4 order-1 float-left">
    <div class="card card-body">3</div>
  </div>
</div>

解決策 2: 自動幅を使用した Flexbox ラップ ハック

別のオプションには、自動列幅を備えたフレックスボックスラップハックの使用が含まれます(w-auto).

追加リソース:

• [ブートストラップの応答性列の高さ](https://www.w3resource.com/twitter-bootstrap) /owned-columns-height.php)
• [予期しない列の順序を修正する方法ブートストラップ 4?](https://stackoverflow.com/questions/48509758/how-to-fix-unexpected-column-order-in-bootstrap-4)

以上がモバイル上でブートストラップ要素をレスポンシブに並べ替える方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。