Bagaimana untuk Menyusun Semula Elemen Bootstrap secara Responsif pada Mudah Alih?

Pesan Elemen Bootstrap Secara Responsif dengan Susunan Semula Mudah Alih

Dalam Bootstrap, mengurus susunan lajur adalah penting untuk reka letak responsif. Walau bagaimanapun, mencapai pesanan yang diingini pada mudah alih kadangkala boleh menimbulkan cabaran.

Kod Awal:

<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>

Masalah:

Kod ini menghasilkan tertib berikut pada mudah alih: 1, 3, 2 dan bukannya 1, 2, 3.

Penyelesaian 1: Lumpuhkan Flexbox pada Skrin Besar

Bootstrap menggunakan flexbox, yang menguatkuasakan ketinggian lajur yang sama. Untuk menyusun semula lajur pada mudah alih, flexbox boleh dilumpuhkan untuk skrin besar (cth., desktop).

<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>

Penyelesaian 2: Flexbox Wrap Hack dengan Auto Width

Satu lagi pilihan melibatkan penggunaan penggodam flexbox wrap dengan lebar lajur automatik (w-auto).

Sumber Tambahan:

• [Ketinggian Lajur Responsif Bootstrap](https://www.w3resource.com/twitter-bootstrap /responsive-columns-height.php)
• [Cara membetulkan susunan lajur yang tidak dijangka dalam bootstrap 4?](https://stackoverflow.com/questions/48509758/how-to-fix-unexpected-column-order-in-bootstrap-4)

Atas ialah kandungan terperinci Bagaimana untuk Menyusun Semula Elemen Bootstrap secara Responsif pada Mudah Alih?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!