Bagaimana untuk Mencapai Susunan Lajur Responsif dalam Bootstrap 3 Menggunakan Kelas Tolak dan Tarik?

Tolak/Tarik Lajur Secara Responsif dengan Bootstrap 3

Dalam Bootstrap 3, anda boleh memanfaatkan kelas tolak dan tarik yang berkuasa untuk memanipulasi susunan dan kedudukan lajur pada saiz skrin yang berbeza. Satu senario biasa ialah menyusun semula reka letak lajur pada skrin yang lebih kecil untuk mengoptimumkan keterlihatan dan kebolehgunaan.

Pertimbangkan reka letak berikut pada skrin yang lebih besar:

<code class="html"><div class="col-lg-3">1</div>
<div class="col-lg-2">2</div>
<div class="col-lg-2">3</div>
<div class="col-lg-2">4</div>
<div class="col-lg-3">5</div></code>

Walau bagaimanapun, anda mungkin mahu memaparkan lajur berbeza pada skrin yang lebih kecil, seperti:

<code class="html"><div class="col-xs-6">1</div>
<div class="col-xs-6">5</div>
<div class="col-xs-4">2</div>
<div class="col-xs-4">3</div>
<div class="col-xs-4">4</div></code>

Pada mulanya, anda mungkin cuba mencapai ini dengan menetapkan kedua-dua saiz skrin besar dan kecil dalam kelas lajur, seperti:

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

Walau bagaimanapun, pendekatan ini selalunya menghasilkan reka letak yang tidak dijangka atau elemen yang hilang.

Untuk menyelesaikan masalah ini, amalkan pemikiran "mudah alih diutamakan". Daripada bermula dengan saiz skrin yang lebih besar, tentukan reka letak untuk skrin terkecil dahulu. Kemudian, gunakan kelas tolak dan tarik untuk melaraskan susunan lajur pada skrin yang lebih besar.

Sebagai contoh, kod berikut mencapai reka letak yang diingini:

<code class="html"><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></code>

Dengan menyusun lajur dalam susunan yang diingini pada skrin yang lebih kecil dahulu, anda kemudian boleh menolak dan menariknya secara terpilih ke kedudukan yang betul pada skrin yang lebih besar tanpa kehilangan sebarang unsur. Pendekatan ini memastikan reka letak yang responsif dan mesra pengguna merentas semua saiz skrin.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Susunan Lajur Responsif dalam Bootstrap 3 Menggunakan Kelas Tolak dan Tarik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!