Bagaimana untuk Menyusun Semula Bootstrap 3 Lajur Menggunakan `col-lg-push` dan `col-lg-pull`?

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

Pemesanan lajur dalam Bootstrap 3 membenarkan pembangun untuk melaraskan kedudukan lajur dalam baris untuk saiz skrin yang berbeza. Kelas col-lg-push dan col-lg-pull direka khusus untuk tujuan ini, memberikan kawalan ke atas reka letak lajur pada peranti skrin besar (desktop dan komputer riba).

Untuk menyesuaikan susunan lajur, anda perlu:

1. Tentukan susunan dalam HTML: Tukar susunan lajur dalam penanda HTML anda. Contohnya, jika anda mahu lajur 5-grid kedua muncul dahulu, letakkan kandungannya sebelum lajur 5-grid pertama dalam kod anda.
2. Gunakan kelas tolak: Tambahkan kol- lg-push-5 kelas ke lajur yang anda mahu alihkan ke kanan. Kelas ini akan menolak lajur sebanyak 5 lajur daripada kedudukan asalnya.
3. Gunakan kelas tarik: Tambahkan kelas col-lg-pull-5 pada lajur yang anda mahu alihkan ke kiri . Kelas ini akan menarik lajur sebanyak 5 lajur ke arah kiri.

Contoh:

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

Penjelasan:

Dalam contoh ini, lajur Kedua ditolak ke kanan sebanyak 5 lajur menggunakan col-lg-push-5, menjadikannya muncul selepas lajur Ketiga pada skrin besar. Lajur Pertama ditarik ke kiri oleh 5 lajur menggunakan col-lg-pull-5, membawanya sebelum lajur Ketiga. Ini menghasilkan reka letak yang diingini: [5] (kedua), [5] (pertama), [2] pada mudah alih dan [5] [5] [2] pada desktop.

Memahami Tarik dan Tolak:

• Tarik: Mengalihkan lajur ke kiri.
• Tolak: Gerakkan lajur ke kanan.

Nota:

• The kelas tolak dan tarik hanya mempengaruhi susunan lajur pada saiz skrin tertentu (dalam kes ini, besar skrin).
• Kelas tidak mempunyai kesan pada saiz skrin yang lebih kecil, kerana Bootstrap mengutamakan reka letak mudah alih secara lalai.

Atas ialah kandungan terperinci Bagaimana untuk Menyusun Semula Bootstrap 3 Lajur Menggunakan `col-lg-push` dan `col-lg-pull`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!