Bagaimanakah Saya Boleh Membalikkan Susunan Lajur Bootstrap 3 pada Reka Letak Mudah Alih?

Menyusun Semula Bootstrap 3 Lajur dalam Reka Letak Mudah Alih

Apabila mereka bentuk reka letak responsif, selalunya perlu melaraskan susunan lajur pada skrin yang lebih kecil. Artikel ini menangani isu khusus untuk menukar susunan lajur dalam reka letak mudah alih Bootstrap 3, di mana lajur bar sisi sedang bertindan di atas lajur kandungan utama.

Masalah:

Saya mempunyai reka letak responsif dengan bar navigasi, bar sisi dan kandungan utama. Pada desktop, reka letak muncul sebagai:

navbar
[3][9]

Walau bagaimanapun, pada mudah alih, reka letak berubah kepada:

navbar
[3]
[9]

Saya ingin membalikkan susunan pada mudah alih kepada:

navbar
[9]
[3]

Penyelesaian:

Walaupun tidak mungkin untuk menukar secara langsung susunan lajur pada mudah alih menggunakan sistem grid terbina dalam Bootstrap, terdapat penyelesaian. Dengan membalikkan susunan lajur dalam kod HTML, anda boleh memanipulasi cara ia muncul pada saiz skrin yang berbeza.

Dalam kes ini, kami mempunyai:

<div>

Untuk membalikkan susunan pada mudah alih, tukar kepada:

<div>

Secara lalai, ini akan memaparkan kandungan utama terlebih dahulu, walaupun pada peranti mudah alih. Kelas col-lg-push dan col-lg-pull digunakan untuk menyusun semula lajur pada saiz skrin yang lebih besar, memastikan bar sisi kekal di sebelah kiri dan kandungan utama di sebelah kanan.

Nota : Penyelesaian ini hanya berfungsi untuk saiz skrin besar (cth., komputer riba). Pada skrin yang lebih kecil, lajur masih akan bertindan seperti yang dimaksudkan oleh Bootstrap.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membalikkan Susunan Lajur Bootstrap 3 pada Reka Letak Mudah Alih?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!