Bagaimanakah Saya Boleh Memesan Lajur Secara Responsif dalam Bootstrap 4?

Pesan Lajur dengan Bootstrap 4

Menyusun Semula Lajur untuk Reka Letak Responsif

Bootstrap 4 menyediakan mekanisme yang dipermudahkan untuk memesan lajur merentas saiz skrin yang berbeza. Artikel ini meneroka pelbagai kaedah untuk mencapai matlamat ini.

Bootstrap 4.1

Dengan pengenalan flexbox dalam Bootstrap 4.1, pesanan lajur menjadi lebih mudah. Kelas utiliti pesanan kini membolehkan anda menentukan susunan lajur yang diingini, antara pesanan-1 hingga pesanan-12. Pesanan responsif boleh dicapai dengan menggabungkan kelas ini, seperti pesanan-md-12 pesanan-2, yang meletakkan lajur sebagai yang terakhir pada skrin sederhana (XXL, XL, LG, MD) dan kedua pada skrin kecil tambahan (XS).

Contoh:

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

Bootstrap 4

Sebelum Bootstrap 4.1, pesanan lajur bergantung pada kelas tolak dan tarik. Kelas ini telah diubah suai dalam Bootstrap 4 dan mengikut sintaks: push-{viewport}-{units} dan pull-{viewport}-{units}. Untuk mencapai reka letak 1-3-2 yang diingini pada skrin mudah alih/lebih kecil, kelas berikut akan digunakan:

Contoh:

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

Nota: Kaedah ini ditamatkan dalam Bootstrap 4.1 .

Utiliti Arah Flexbox

Selain utiliti pesanan, Bootstrap 4.1 juga menyediakan kelas flex-column-reverse dan flex-md-row. Kelas ini membolehkan anda menukar arah lajur pada saiz skrin yang berbeza. Sebagai contoh, kod berikut menyusun lajur secara menegak pada skrin mudah alih dan mendatar pada skrin sederhana dan lebih besar:

Contoh:

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

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