Bagaimana untuk Menolak/Tarik Lajur dalam Bootstrap 3 Hanya pada Saiz Skrin yang Lebih Kecil?

Bootstrap 3: Cara Tolak/Tarik Lajur pada Saiz Skrin Yang Lebih Kecil Sahaja

Bootstrap menyediakan fungsi untuk menolak dan menarik lajur untuk melaraskannya susun atur berdasarkan saiz skrin. Walau bagaimanapun, kadangkala anda mungkin menghadapi situasi di mana anda ingin menolak/menarik lajur hanya pada saiz skrin yang lebih kecil sambil mengekalkan kedudukannya pada skrin yang lebih besar.

Pertimbangkan struktur HTML berikut:

<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>

Reka letak ini akan kelihatan seperti ini pada skrin besar:

|    1    |  2  |  3  |  4  |    5    |

Tetapi anda mahukan reka letak yang berbeza pada yang lebih kecil skrin:

|        1        |        5        |
|     2     |     3     |     4     |

Penyelesaian:

Untuk mencapai matlamat ini, kita perlu mendekati masalah dengan pemikiran "mudah alih dahulu". Konfigurasikan reka letak untuk saiz skrin terkecil dahulu, kemudian gunakan kelas tolak/tarik untuk mengalihkan lajur ke kedudukan yang diingini pada skrin yang lebih besar.

HTML yang dikemas kini:

<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 meletakkan kelas lajur untuk kedua-dua skrin besar dan kecil dalam teg yang sama, kami boleh memastikan lajur diletakkan dalam susunan yang dikehendaki pada tablet terlebih dahulu. Kemudian, kelas tolak/tarik digunakan untuk melaraskan kedudukannya pada desktop.

Kod yang dikemas kini ini akan menghasilkan reka letak yang diingini pada semua saiz skrin:

Skrin besar:

|    1    |        5        |     2     |     3     |     4     |

Skrin kecil:

|        1        |        5        |
|     2     |     3     |     4     |

Atas ialah kandungan terperinci Bagaimana untuk Menolak/Tarik Lajur dalam Bootstrap 3 Hanya pada Saiz Skrin yang Lebih Kecil?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!