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>
<p><strong>Penjelasan:</strong></p>
<p>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 (</p>
<p><strong>Nota Penting:</strong></p>
<ul>
<li>Kelas col-lg-push dan col-lg-pull mempengaruhi lajur hanya pada port pandangan (desktop) yang besar.</li>
<li>Susunan lajur dalam HTML anda harus mencerminkan reka letak mudah alih yang diingini.</li>
<li>Bootstrap 4 memperkenalkan sistem grid berasaskan flexbox, yang memperkenalkan .order- * kelas untuk pesanan lajur yang lebih fleksibel.</li>
</ul>
</div>

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!