Bagaimana untuk Mencapai Reka Letak Lajur Bootstrap Responsif dengan Saiz Skrin Berubah Menggunakan Kelas Tolak dan Tarik?

Reka Letak Lajur Bootstrap Responsif dengan Saiz Skrin Boleh Ubah

Dalam pembangunan web, selalunya perlu melaraskan reka letak halaman berdasarkan paparan penonton. saiz skrin. Bootstrap menyediakan cara yang mudah untuk melakukan ini menggunakan kelas tolak dan tarik.

Menolak dan Menarik Lajur dalam Bootstrap

Untuk menolak atau menarik lajur, cuma tambah kelas yang sesuai kepada elemen HTML lajur. Sintaks untuk kelas ini ialah:

col-{breakpoint}-{size}

Sebagai contoh, untuk menolak lajur dua lajur ke kanan pada skrin kecil (iaitu, "xs"), anda akan menambah kelas col-xs-push- 2. Begitu juga, untuk menarik lajur tiga lajur ke kiri pada skrin besar (iaitu, "lg"), anda akan menambah kelas col-lg-pull-3.

Menolak/Menarik Lajur pada Lebih Kecil Saiz Skrin

Untuk mencapai reka letak yang diingini dalam soalan yang diberikan, adalah penting untuk menggunakan kelas yang menyasarkan saiz skrin yang lebih kecil dahulu. Ini memastikan pendekatan mengutamakan mudah alih dikekalkan.

<div class="col-lg-3 col-xs-6">1</div>
<div class="col-lg-3 col-xs-6 col-lg-push-6">5</div>
<div class="col-lg-2 col-xs-4 col-lg-pull-3">2</div>
<div class="col-lg-2 col-xs-4 col-lg-pull-3">3</div>
<div class="col-lg-2 col-xs-4 col-lg-pull-3">4</div>

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Reka Letak Lajur Bootstrap Responsif dengan Saiz Skrin Berubah Menggunakan Kelas Tolak dan Tarik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!