Bagaimanakah Saya Boleh Menyusun Semula Bootstrap 3 Lajur pada Skrin Lebih Besar Sambil Mengekalkan Reka Letak Mudah Alih?

Menukar Susunan Lajur dalam Reka Letak Mudah Alih Bootstrap 3

Anda sedang bekerja dengan reka letak responsif menggunakan Bootstrap 3.x, yang terdiri daripada dua lajur: bar sisi (3) dan kandungan (9). Walaupun reka letak dipaparkan dengan baik pada desktop:

navbar
[3][9]

Pada mudah alih, pesanan berubah:

navbar
[3]
[9]

Anda mahu mengekalkan pesanan pada mudah alih, dengan kandungan di bahagian atas.

Penyelesaian: Menyusun Semula Lajur

Pendekatan untuk menyusun semula lajur berbeza-beza berdasarkan saiz skrin. Dalam kes ini, anda tidak boleh menukar susunan pada skrin yang lebih kecil. Walau bagaimanapun, anda boleh menukarnya dalam skrin yang lebih besar.

Langkah 1: Tukar Susunan Lajur

Tukar susunan lajur anda dalam kod:

<!-- Main Content -->
<div>

Secara lalai, ini akan memaparkan kandungan utama terlebih dahulu, walaupun pada mudah alih.

Langkah 2: Gunakan col-lg-push dan col-lg-pull

col-lg-push dan col-lg-pull membolehkan anda menyusun semula lajur dalam skrin besar. Beginilah anda boleh memaparkan bar sisi di sebelah kiri dan kandungan utama di sebelah kanan dalam skrin yang lebih besar:

<!-- Main Content -->
<div>

Dengan menggunakan kaedah ini, anda boleh menyusun semula lajur dalam skrin besar tanpa menjejaskan reka letak pada mudah alih .

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyusun Semula Bootstrap 3 Lajur pada Skrin Lebih Besar Sambil Mengekalkan Reka Letak Mudah Alih?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!