Bagaimanakah Saya Boleh Memanipulasi Susunan Lajur dalam Bootstrap 3 Menggunakan `col-lg-push` dan `col-lg-pull`?

Manipulasi Susunan Lajur menggunakan col-lg-push dan col-lg-pull dalam Twitter Bootstrap 3

Twitter Bootstrap's col-lg- kelas push dan col-lg-pull memberikan fleksibiliti untuk memanipulasi susunan lajur pada skrin yang lebih besar (desktop atau komputer riba).

Memahami Sintaks

Sintaks untuk kelas ini ialah:

• col-vp-push-x : Menolak lajur x bilangan lajur ke kanan, bermula dari kedudukan biasa pada port paparan lebih besar daripada atau sama dengan vp.
• col-vp-pull-x: Menarik lajur x bilangan lajur ke kiri, bermula dari kedudukan biasa pada port-pandangan yang lebih besar daripada atau sama dengan vp.

Di sini, vp boleh jadi xs, sm, md, atau lg, manakala x berjulat dari 1 hingga 12.

Contoh Senario

Pertimbangkan contoh berikut di mana anda ingin memaparkan grid 3 lajur: 2 dengan panjang 5 dan 1 dengan panjang 2.

• Paparan Desktop (≥ lg): Paparan [5] [5] [2] mendatar.
• Paparan Mudah Alih (≤ sm): Paparan [5] (saat) [5] (pertama) [2] secara menegak.

Kod:

<div class='row'>
  <div class='col-lg-5 col-lg-push-5'></div>
  <div class='col-lg-5 col-lg-pull-5'></div>
  <div class='col-lg-2'></div>
</div>

Penjelasan:

• Kol-lg pertama -5 elemen ditolak 5 lajur ke kanan, jadi ia akan bermula 5 lajur selepas biasa kedudukan.
• Elemen col-lg-5 kedua ditarik 5 lajur ke kiri, jadi ia akan memulakan 5 lajur sebelum kedudukan biasa.
• Elemen col-lg-2 kekal dalam tertib lalainya.

Nota: Untuk memastikan kefungsian yang betul, pastikan susunan elemen dalam markup sepadan dengan susunan yang dikehendaki pada skrin yang lebih besar.

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