Rumah >hujung hadapan web >tutorial css >Bagaimanakah Saya Boleh Memanipulasi Susunan Lajur dalam Bootstrap 3 Menggunakan `col-lg-push` dan `col-lg-pull`?

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

Mary-Kate Olsen
Mary-Kate Olsenasal
2024-12-12 21:32:18764semak imbas

How Can I Manipulate Column Order in Bootstrap 3 Using `col-lg-push` and `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!

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