Bagaimana untuk Menyusun Semula Bootstrap 3 Lajur untuk Reka Letak Mudah Alih Diutamakan?

Menyusun Semula Bootstrap 3 Lajur dalam Reka Letak Mudah Alih

Masalah:

Susun letak responsif menampilkan bar navigasi atas tetap dan dua lajur di bawahnya: bar sisi dan kandungan utama. Walaupun reka letak berfungsi seperti yang diharapkan pada desktop, pada peranti mudah alih, bar sisi disusun di atas kandungan utama, meletakkannya pada kedudukan yang tidak diingini. Pesanan yang diingini pada mudah alih adalah untuk memaparkan kandungan utama dahulu, diikuti dengan bar sisi.

Jawapan:

Mengubah susunan lajur secara langsung pada mudah alih tidak boleh dilakukan dalam Bootstrap 3. Walau bagaimanapun, penyelesaian adalah dengan menggunakan ciri penyusunan semula lajur responsif Bootstrap untuk skrin.

Langkah:

1. Susun semula susunan lajur dalam HTML, meletakkan kandungan utama dahulu:

<div class="col-lg-9 col-lg-push-3">...</div>
<div class="col-lg-3 col-lg-pull-9">...</div>

2. Secara lalai, kelas ini memaparkan kandungan utama terlebih dahulu walaupun pada peranti mudah alih.
3. Kelas col-lg-push-3 menolak kandungan utama tiga lajur ke kanan, manakala col-lg-pull-9 menarik bar sisi sembilan lajur ke kiri, menghasilkan susunan yang diingini pada skrin besar.

Penjelasan:

Dalam Bootstrap, lajur boleh diubah kedudukan menggunakan col-push dan col-pull untuk saiz skrin tertentu. Dengan menggunakan col-lg-push dan col-lg-pull untuk skrin besar, lajur akan mengambil alih susunan yang ditentukan pada skrin tersebut sambil mengekalkan susunan asal pada peranti yang lebih kecil.

Atas ialah kandungan terperinci Bagaimana untuk Menyusun Semula Bootstrap 3 Lajur untuk Reka Letak Mudah Alih Diutamakan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!