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

DDD
Lepaskan: 2024-11-01 12:04:29
asal
991 orang telah melayarinya

How to Push/Pull Columns in Bootstrap 3 Only on Smaller Screen Sizes?

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

Reka letak ini akan kelihatan seperti ini pada skrin besar:

|    1    |  2  |  3  |  4  |    5    |
Salin selepas log masuk

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

|        1        |        5        |
|     2     |     3     |     4     |
Salin selepas log masuk
Salin selepas log masuk

Penyelesaian:

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

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

Skrin kecil:

|        1        |        5        |
|     2     |     3     |     4     |
Salin selepas log masuk
Salin selepas log masuk

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!

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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!