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

Memanipulasi Susunan Lajur dengan col-lg-push dan col-lg-pull dalam Twitter Bootstrap 3

Dalam Twitter Bootstrap 3, col Kelas -lg-push dan col-lg-pull membenarkan pembangun memanipulasi susunan lajur dalam susun atur grid pada desktop dan di atas viewports. Fungsi ini amat berguna apabila membuat reka letak responsif yang perlu memaparkan lajur dalam susunan tertentu pada saiz skrin tertentu.

Memahami col-lg-push dan col-lg-pull

• col-lg-push-x: Kelas ini menolak lajur ke kanan dengan bilangan lajur yang ditentukan, dengan berkesan mengalihkan kedudukannya ke kanan dalam grid.
• col-lg-pull-x: Kelas ini menarik lajur ke kiri dengan bilangan lajur yang ditentukan , mengalihkan kedudukannya ke kiri dalam grid.

Sintaks dan Penggunaan

Untuk menggunakan kelas ini, cuma tambahkannya pada kelas col-lg-* yang mentakrifkan lebar lajur. Contohnya, jika anda ingin menolak lajur ke kanan sebanyak 5 lajur, anda akan menggunakan kelas col-lg-5 col-lg-push-5.

Contoh

Pertimbangkan penanda berikut:

<div class="row">
  <div class="col-lg-5 col-lg-push-5">Content B</div>
  <div class="col-lg-5 col-lg-pull-5">Content A</div>
  <div class="col-lg-2">Content C</div>
</div>

Pada paparan desktop (di mana lg digunakan), Kandungan B akan ditolak ke kanan sebanyak 5 lajur, meletakkannya di sebelah kanan Kandungan C. Kandungan A akan ditarik ke kiri sebanyak 5 lajur, dengan berkesan meletakkannya di sebelah kiri Kandungan B. Ini menghasilkan reka letak berikut:

[Content B] [Content A] [Content C]

Pengecualian pada Port Pandangan Mudah Alih

Adalah penting untuk ambil perhatian bahawa fungsi tolak dan tarik hanya terpakai pada port pandangan yang lebih besar daripada atau sama dengan saiz yang ditentukan. Contohnya, jika anda menggunakan col-lg-push-5, ia hanya akan menolak lajur pada port pandangan desktop (di mana lg digunakan). Pada port pandangan mudah alih, lajur akan dipaparkan dalam susunan lalainya.

Kesimpulan

Kelas col-lg-push dan col-lg-pull menyediakan cara yang berkesan untuk memanipulasi susunan lajur dalam reka letak Bootstrap 3. Dengan memahami sintaks dan garis panduan penggunaan, pembangun boleh membuat reka letak responsif yang menyesuaikan diri dengan saiz skrin yang berbeza sambil mengekalkan hierarki visual yang diingini.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Kawal 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!