Bagaimanakah Saya Boleh Menyusun Semula Lajur dalam Bootstrap 4?

Pesan Lajur melalui Bootstrap4

Penyusunan semula lajur dalam Bootstrap4 boleh dicapai menggunakan pelbagai teknik, bergantung pada keperluan dan versi Bootstrap yang digunakan.

Bootstrap 4.1 (Versi Semasa)**

Bootstrap 4.1 memperkenalkan satu set kelas pesanan responsif baharu: pesanan-dahulu, pesanan-terakhir dan pesanan-0 hingga pesanan-12. Kelas-kelas ini membolehkan lebih fleksibiliti dalam mengawal susunan lajur pada saiz skrin yang berbeza.

Untuk memesan lajur dalam paparan mudah alih yang diingini (1-3-2), gunakan kod berikut:

<div class="row">
  <div class="col-3 col-md-6 order-1">1</div>
  <div class="col-6 col-md-12 order-3">3</div>
  <div class="col-3 col-md-6 order-2">2</div>
</div>

Bootstrap 4 (Versi Lama)**

Dalam versi terdahulu Bootstrap 4 (pra-4.1), tolak dan tarik kelas digunakan untuk mengawal susunan lajur. Walau bagaimanapun, setakat Bootstrap 4.0 beta, kelas ini telah ditamatkan penggunaannya dan digantikan dengan push-{viewport}-{units} dan pull-{viewport}-{units}.

Pra-4.0 Beta

Untuk mencapai susun atur yang diingini (1-3-2) menggunakan beta pra-4.0 sintaks:

<div class="row">
  <div class="col-xs-3 col-md-6">1</div>
  <div class="col-xs-6 col-md-12">3</div>
  <div class="col-xs-3 col-md-6 col-md-pull-0 col-xs-pull-6">2</div>
</div>

4.0 Beta dan Kemudian

Untuk Bootstrap 4.0 beta dan versi yang lebih baru, sintaks berikut harus digunakan:

<div class="row">
  <div class="col-xs-3 col-md-6">1</div>
  <div class="col-xs-6 col-md-12">3</div>
  <div class="col-xs-3 col-md-6 push-md-0 pull-md-6">2</div>
</div>

Pendekatan Lain

Flexbox Arah

Dalam Bootstrap 4.1 dan yang lebih baru, anda juga boleh menggunakan utiliti arah flexbox untuk menukar susunan lajur. Sebagai contoh, kod berikut akan membalikkan susunan lajur pada skrin mudah alih:

<div class="row flex-column-reverse flex-md-row">
  <div class="col-md-8">2</div>
  <div class="col-md-4">1st on mobile</div>
</div>

Lajur Boleh Dilipat

Pilihan lain untuk memesan lajur ialah menggunakan lajur boleh lipat. Ini membolehkan anda menyembunyikan atau menunjukkan lajur berdasarkan saiz skrin. Gunakan kelas runtuh dan tunjukkan untuk melaksanakan lajur boleh lipat.

Rujuk kepada contoh kod dan dokumentasi yang disediakan untuk butiran lanjut dan demonstrasi tentang memesan lajur melalui Bootstrap4.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyusun Semula Lajur dalam Bootstrap 4?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!