Bagaimana untuk Menyusun Bootstrap 4 Div pada Mudah Alih dan Menyusunnya Bersebelahan pada Desktop?

Menempatkan semula div dengan Bootstrap 4: Ditindan pada Mudah Alih, Bersebelahan pada Desktop

Anda mahu menyusun semula div Bootstrap pada mudah alih dan letakkannya sebelah-menyebelah desktop.

Penyelesaian:

1. Lumpuhkan Flexbox untuk Lebar Lebih Besar:
   Kotak lentur Bootstrap 4 memberikan ketinggian yang sama kepada lajur. Untuk mengelakkan ini, lumpuhkan flexbox untuk lebar yang lebih besar daripada sederhana.

<div>

2. Gunakan Terapung untuk Lebar yang Lebih Kecil (Mudah Alih):
   Dayakan terapung lajur untuk membenarkan lajur kedua dan ketiga (B dan C) untuk dibalut di bawah lajur pertama (A).

        <div>

3. Tetapkan Susunan Lajur:
   Gunakan pesanan- kelas utiliti untuk menyusun semula lajur pada mudah alih. Dalam kes ini, tetapkan susunan lajur pertama kepada 1 (pesanan-1) dan susunan lajur kedua kepada 0 (pesanan-0). Ini akan meletakkan A di bawah B pada mudah alih, sambil mengekalkan susunan sebelah menyebelahnya pada desktop.

        <div>

Penyelesaian ini mencapai reka letak yang diingini, dengan baki ketinggian penuh lajur A dan lajur B dan C disusun di bawah pada mudah alih.

Atas ialah kandungan terperinci Bagaimana untuk Menyusun Bootstrap 4 Div pada Mudah Alih dan Menyusunnya Bersebelahan pada Desktop?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!