cari
Rumahhujung hadapan webtutorial cssBagaimanakah Saya Boleh Menyusun Semula Bootstrap 3 Lajur untuk Reka Letak Mudah Alih?

How Can I Reorder Bootstrap 3 Columns for Mobile Layouts?

Mencapai Susunan Semula Lajur untuk Reka Letak Mudah Alih Bootstrap 3

Bootstrap menyediakan sistem grid yang berkuasa untuk mencipta reka letak responsif. Walau bagaimanapun, ia tidak mempunyai keupayaan untuk menukar susunan lajur secara eksplisit untuk reka letak mudah alih. Artikel ini meneroka pendekatan alternatif untuk mencapai penyusunan semula lajur.

Masalah:

Seorang pengguna sedang mencipta reka letak responsif dengan bar navigasi atas dan dua lajur: bar sisi dan kandungan. Apabila skrin berubah saiz kepada reka letak mudah alih, bar sisi disusun di atas kandungan dan bukannya dipaparkan terus di bawahnya. Matlamatnya ialah untuk menyusun semula susunan lajur pada mudah alih agar kandungan utama berada di bahagian atas.

Penyelesaian:

Walaupun tidak boleh mengubah lajur secara langsung pesanan untuk skrin mudah alih, terdapat penyelesaian menggunakan kelas tolak dan tarik.

Kod Penjelasan:

Untuk mengutamakan kandungan utama, tukar susunan lajur seperti berikut:

<!-- Main Content (Pushed 3 columns to the right on large screens) -->
<div class="col-lg-9 col-lg-push-3">...</div>

<!-- Sidebar (Pulled 9 columns to the left on large screens) -->
<div class="col-lg-3 col-lg-pull-9">...</div>

Pengubahsuaian ini mengalihkan kandungan utama ke kanan sebanyak 3 lajur dan bar sisi ke kiri dengan 9 lajur pada skrin besar. Walau bagaimanapun, dalam skrin yang lebih kecil, susunan lajur lalai kekal tidak berubah, membawa kepada reka letak kandungan utama yang diingini di bahagian atas.

Pertimbangan Tambahan untuk Sidebar:

Jika anda lebih suka memaparkan bar sisi di dalam bar navigasi yang berkembang, pertimbangkan perkara berikut:

  • Kembangkan menu ke tindanan kandungan secara menegak dan bukannya mendatar.
  • Sembunyikan bar sisi secara lalai dan paparkannya menggunakan JavaScript pada pengaktifan menu.

Kesimpulan:

Menggunakan kelas tolak dan tarik, anda boleh menyusun semula lajur untuk skrin besar dengan berkesan. Untuk reka letak lajur yang lebih kompleks atau susunan semula mudah alih, terokai penyelesaian alternatif, seperti grid responsif atau CSS Flexbox.

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

Kenyataan
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
Di manakah 'Langgan Podcast' pautan ke?Di manakah 'Langgan Podcast' pautan ke?Apr 16, 2025 pm 12:04 PM

Untuk sementara waktu, iTunes adalah anjing besar dalam podcasting, jadi jika anda mengaitkan "Langgan Podcast" untuk suka:

Kepelbagaian enjin pelayarKepelbagaian enjin pelayarApr 16, 2025 pm 12:02 PM

Kami kehilangan opera ketika mereka pergi Chrome pada tahun 2013. Sama dengan Edge ketika ia juga menjadi Chrome awal tahun ini. Mike Taylor memanggil perubahan ini "menurun

Pertimbangan UX untuk Perkongsian WebPertimbangan UX untuk Perkongsian WebApr 16, 2025 am 11:59 AM

Dari laman web Trashy Clickbait hingga paling banyak penerbitan, butang saham telah lama di mana -mana di seluruh web. Namun ia boleh dikatakan bahawa ini

Berita Platform Mingguan: Apple Menggunakan Komponen Web, Rendering HTML Progresif, Sumber Kritikal SendiriBerita Platform Mingguan: Apple Menggunakan Komponen Web, Rendering HTML Progresif, Sumber Kritikal SendiriApr 16, 2025 am 11:55 AM

Dalam roundup minggu ini, Apple masuk ke dalam komponen web, bagaimana Instagram adalah skrip insta-loading, dan beberapa makanan untuk difikirkan untuk sumber kritikal sendiri.

Pathspec git dan cara menggunakannyaPathspec git dan cara menggunakannyaApr 16, 2025 am 11:53 AM

Apabila saya melihat melalui dokumentasi arahan git, saya perhatikan bahawa banyak daripada mereka mempunyai pilihan untuk. Saya pada mulanya berpendapat bahawa ini hanya

Pemetik warna untuk gambar produkPemetik warna untuk gambar produkApr 16, 2025 am 11:49 AM

Bunyi seperti masalah yang sukar tidak? Kami sering tidak mempunyai tembakan produk dalam beribu -ribu warna, supaya kita dapat membalikkannya. Kami juga tidak

Mod gelap bertukar -tukar dengan reaksi dan temaMod gelap bertukar -tukar dengan reaksi dan temaApr 16, 2025 am 11:46 AM

Saya suka apabila laman web mempunyai pilihan mod gelap. Mod gelap menjadikan laman web lebih mudah bagi saya untuk membaca dan membantu mata saya berasa lebih santai. Banyak laman web, termasuk

Beberapa tangan dengan elemen dialog HTMLBeberapa tangan dengan elemen dialog HTMLApr 16, 2025 am 11:33 AM

Ini saya melihat elemen HTML untuk kali pertama. Saya telah menyedarinya untuk seketika, tetapi Haven ' t mengambilnya untuk putaran lagi. Ia mempunyai cukup keren dan

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Arahan sembang dan cara menggunakannya
1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌

Alat panas

Penyesuai Pelayan SAP NetWeaver untuk Eclipse

Penyesuai Pelayan SAP NetWeaver untuk Eclipse

Integrasikan Eclipse dengan pelayan aplikasi SAP NetWeaver.

Pelayar Peperiksaan Selamat

Pelayar Peperiksaan Selamat

Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.

Muat turun versi mac editor Atom

Muat turun versi mac editor Atom

Editor sumber terbuka yang paling popular

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

Dreamweaver Mac版

Dreamweaver Mac版

Alat pembangunan web visual