Bagaimanakah Kelas `col-lg-push` dan `col-lg-pull` Bootstrap Boleh Memanipulasi Susunan Lajur?

Manipulasi Susunan Lajur Menggunakan Susunan Grid dalam Bootstrap

Sistem grid Bootstrap membolehkan kawalan tepat ke atas reka letak dan susunan lajur. Kelas col-lg-push dan col-lg-pull membolehkan anda menolak atau menarik lajur ke kedudukan tertentu dalam satu baris pada port pandangan desktop (>= lg).

Cara Menggunakan col- lg-push dan col-lg-pull

Untuk menolak atau menarik lajur, nyatakan nombor yang dikehendaki selepas col-lg-push atau col-lg-pull. Sebagai contoh, col-lg-pull-5 akan menarik lajur 5 lajur ke kiri, bermula dari kedudukan lalainya.

Contoh: Menyusun Semula Lajur untuk Mudah Alih dan Desktop

Mari kita ambil contoh yang anda berikan:

[5] [5] [2]  (Desktop)

[5] (second)
[5] (first)
[2]  (Mobile)

Untuk mencapai reka letak ini menggunakan susunan grid Bootstrap, anda akan menggunakan kod berikut:

<div>

Penjelasan:

Pada paparan desktop (>= lg), susunan lajur dalam HTML anda akan menentukan reka letak . Oleh itu, Kandungan B akan ditolak ke kanan sebanyak 5 lajur, meletakkannya selepas Kandungan A. Pada port pandangan mudah alih (< lg), susunan lalai akan digunakan, menjadikan Kandungan B dahulu, diikuti dengan Kandungan A.

Nota Penting:

• Kelas col-lg-push dan col-lg-pull mempengaruhi lajur hanya pada port pandangan (desktop) yang besar.
• Susunan lajur dalam HTML anda harus mencerminkan reka letak mudah alih yang diingini.
• Bootstrap 4 memperkenalkan sistem grid berasaskan flexbox, yang memperkenalkan .order- * kelas untuk pesanan lajur yang lebih fleksibel.

Atas ialah kandungan terperinci Bagaimanakah Kelas `col-lg-push` dan `col-lg-pull` Bootstrap Boleh Memanipulasi Susunan Lajur?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!