Bagaimana untuk Memesan Lajur dengan Berkesan dalam Bootstrap 4 dan 5?

Memesan Lajur dengan Bootstrap 4

Dalam Bootstrap 4, pesanan lajur boleh dicapai menggunakan gabungan kelas dan flexbox. Untuk mendapatkan reka letak 1-3-2 yang diingini pada skrin mudah alih, kami akan meneroka teknik berikut:

2021 - Bootstrap 5

Bootstrap 5 memperkenalkan kelas baharu untuk pesanan responsif: pesanan-dahulu, pesanan-terakhir, dan pesanan-0 hingga pesanan-5. Ini memudahkan pesanan lajur, membolehkan anda menetapkan susunan yang diingini untuk setiap saiz port pandangan.

2018 - Bootstrap 4

Beta Pra-4.0:

Sebelum Bootstrap 4.0 beta, kelas tolak dan tarik mempunyai format tolak-{viewport}-{units} dan tarik-{viewport}-{units} tanpa xs- infix. Untuk mencapai susun atur 1-3-2 pada mudah alih, kami akan menggunakan kelas seperti ini:

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

Bootstrap 4.1 dan Kemudian

Bootstrap 4.1 memperkenalkan flexbox, menyediakan cara yang lebih intuitif untuk memesan lajur. Kelas pesanan responsif terdiri daripada pesanan-1 hingga pesanan-12. Dengan menetapkan kelas ini, kita boleh menentukan susunan lajur berbanding .row induknya:

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

Menukar Pesanan Menggunakan Arah Flexbox

Selain memesan kelas , Bootstrap 4.1 juga membenarkan untuk membalikkan susunan lajur menggunakan utiliti arah flexbox:

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

Atas ialah kandungan terperinci Bagaimana untuk Memesan Lajur dengan Berkesan dalam Bootstrap 4 dan 5?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!