Bagaimana untuk Mencapai Pesanan Lajur Tersuai dalam Bootstrap Responsif pada Mudah Alih?

Pemesanan Lajur Bootstrap Responsif pada Mudah Alih

Dalam mereka bentuk reka letak responsif, memastikan susunan lajur yang diingini pada saiz skrin yang berbeza boleh menjadi mencabar. Soalan ini menangani kes khusus mengatur reka letak lajur bersarang secara berbeza pada peranti mudah alih berbanding skrin yang lebih besar.

Masalahnya:

Seorang pembangun mempunyai reka letak dengan dua lajur dan baris bersarang dalam lajur sebelah kanan. Matlamatnya adalah untuk memaparkan lajur dalam susunan berikut pada mudah alih:

|  1   |
|      |
--------
|  2   |
|      |
|      |
|      |
|      |
|      |
--------
|  3   |
|      |
--------

Walau bagaimanapun, kod semasa menghasilkan susunan 1-3-2 yang salah pada mudah alih.

Penyelesaian:

Penyelesaian melibatkan melumpuhkan flexbox untuk saiz skrin yang lebih besar dan menggunakan terapung untuk mencapai reka letak yang diingini pada mudah alih. Kod berikut menunjukkan pendekatan ini:

<div>

Cara Ia Berfungsi:

• Melumpuhkan Flexbox pada Skrin yang Lebih Besar: D- kelas utiliti flex d-lg-block membolehkan flexbox pada skrin yang lebih kecil daripada lg tetapi nyahdayakannya pada lg dan atas.
• Menggunakan Terapung untuk Mudah Alih: Apabila flexbox dilumpuhkan, utiliti float-left digunakan pada lajur untuk meletakkannya bersebelahan.
• Menyusun semula dengan pesanan-*: Pada mudah alih (apabila flexbox didayakan), kelas utiliti pesanan-* digunakan untuk menyusun semula lajur sebagai dikehendaki.

Penyelesaian Alternatif:

Seperti yang dinyatakan dalam jawapan yang disediakan, satu lagi penyelesaian berpotensi melibatkan penggodaman pembalut flexbox menggunakan w-auto. Pendekatan ini melibatkan penetapan lebar automatik pada lajur, membolehkan mereka membalut ke baris seterusnya pada mudah alih. Walau bagaimanapun, adalah penting untuk ambil perhatian bahawa penggodaman ini mungkin tidak boleh dipercayai seperti penyelesaian pertama, yang bergantung pada utiliti Bootstrap standard.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Pesanan Lajur Tersuai dalam Bootstrap Responsif pada Mudah Alih?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!