Rumah > hujung hadapan web > tutorial css > Bagaimanakah Saya Boleh Membalikkan Susunan Lajur Bootstrap 3 pada Reka Letak Mudah Alih?

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

Barbara Streisand
Lepaskan: 2024-12-12 17:35:11
asal
956 orang telah melayarinya

How Can I Reverse Bootstrap 3 Column Order on Mobile Layouts?

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]
Salin selepas log masuk

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

navbar
[3]
[9]
Salin selepas log masuk

Saya ingin membalikkan susunan pada mudah alih kepada:

navbar
[9]
[3]
Salin selepas log masuk

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>
Salin selepas log masuk
Salin selepas log masuk

Untuk membalikkan susunan pada mudah alih, tukar kepada:

<div>
Salin selepas log masuk
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan