Rumah > hujung hadapan web > tutorial css > Bagaimanakah Bootstrap 4 Mengendalikan Pesanan Lajur Merentasi Saiz Skrin Berbeza?

Bagaimanakah Bootstrap 4 Mengendalikan Pesanan Lajur Merentasi Saiz Skrin Berbeza?

Susan Sarandon
Lepaskan: 2024-12-18 10:56:18
asal
140 orang telah melayarinya

How Does Bootstrap 4 Handle Column Ordering Across Different Screen Sizes?

Pemesanan Lajur dalam Bootstrap4

Untuk susunan lajur yang fleksibel merentas saiz skrin yang berbeza, Bootstrap menawarkan pelbagai pilihan.

Pemesanan Responsif dalam Bootstrap 4.0:

Bootstrap 4 menghapuskan penggunaan awalan "xs-" untuk kelas pesanan responsifnya. Sebaliknya, pengubah suai "tolak-" dan "tarik-" menentukan port pandangan dan bilangan unit untuk mengalihkan lajur. Contohnya, untuk mencapai pesanan 1-3-2 yang dikehendaki pada mudah alih:

<div>
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk

Pesanan Responsif dalam Bootstrap 4.1 dan Ke Atas:

Bootstrap 4.1 memperkenalkan flexbox, memudahkan susunan lajur. Kelas pesanan terdiri daripada "pesanan-1" hingga "pesanan-12." Lajur boleh dipesan secara responsif, seperti "pesanan-md-12 pesanan-2" (terakhir pada MD, ke-2 pada XS):

<div>
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk

Kaedah Pesanan Alternatif:

Selain kelas pesanan responsif, utiliti arah flexbox menawarkan yang lain pendekatan:

<div>
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk

Nota Tambahan:

  • Pemesanan lajur adalah relatif kepada .row induknya.
  • Kelas responsif membenarkan kawalan berbutir terlebih pesanan, membolehkan pengaturan yang rumit merentas berbilang saiz skrin.
  • Bootstrap 4.1 dan ke atas tidak lagi menyokong kelas tolak/tarik yang digunakan dalam versi pra-4.0.

Atas ialah kandungan terperinci Bagaimanakah Bootstrap 4 Mengendalikan Pesanan Lajur Merentasi Saiz Skrin Berbeza?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan