Rumah > hujung hadapan web > tutorial css > Bagaimanakah kelas mengimbangi lajur berubah dalam Bootstrap 4 Beta?

Bagaimanakah kelas mengimbangi lajur berubah dalam Bootstrap 4 Beta?

Linda Hamilton
Lepaskan: 2024-11-07 05:46:03
asal
320 orang telah melayarinya

How have column offset classes changed in Bootstrap 4 Beta?

Pengimbangan Lajur dalam Bootstrap 4.0.0-Beta

Dalam Bootstrap 4 Beta, kelas ofset telah dikemas kini, mengakibatkan kekeliruan bagi pengguna yang biasa menggunakan "offset- md-*" untuk mengalihkan lajur.

Perubahan Kelas Offset

Dalam Bootstrap 4 Beta, kelas "offset-md-" telah digantikan dengan "offset-{breakpoint}- ." Contohnya, untuk mengimbangi lajur dengan dua lajur pada titik putus sederhana, anda kini akan menggunakan "offset-md-2" dan bukannya "col-md-offset-2."

ml-auto untuk Penjajaran Lajur

Kelas "ml-auto" menyediakan cara baharu untuk menjajarkan lajur dengan mengalihkannya sejauh mungkin ke kanan. Walau bagaimanapun, pendekatan pengimbangan automatik ini mungkin tidak sesuai untuk semua senario.

Penyelesaian Pengimbangan Tersuai

Jika anda memerlukan pengimbangan lajur tertentu, seperti mengimbangi dengan dua lajur, penyelesaiannya adalah dengan menggunakan tiruan atau lajur pemegang tempat untuk mencapai kesan yang diingini. Contohnya:

<div class="row">
  <div class="col-md-2"></div>
  <div class="col-md-4">
    ...
  </div>
</div>
Salin selepas log masuk

mx-auto untuk Memusatkan Lajur

Untuk memusatkan lajur, gunakan kelas "mx-auto", yang mencipta jidar yang sama pada kedua-dua belah lajur.

<div class="row">
  <div class="col-md-4 mx-auto">
    ...
  </div>
</div>
Salin selepas log masuk

Nota: Offset Lajur Khusus dalam Beta 2

Adalah penting untuk ambil perhatian bahawa ofset lajur tertentu, seperti "offset-md-2," akan dipulihkan dalam Bootstrap 4 Beta 2. Walau bagaimanapun, kelas "ml-auto" dan "mx-auto" masih boleh digunakan untuk penjajaran dan pemusatan lajur yang fleksibel.

Atas ialah kandungan terperinci Bagaimanakah kelas mengimbangi lajur berubah dalam Bootstrap 4 Beta?. 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