Bagaimanakah Kelas Utiliti Jarak Bootstrap Berubah dalam Bootstrap 4 dan 5?

Bagaimanakah saya menggunakan Kelas Utiliti Jarak dalam Bootstrap?

Dalam artikel yang anda temui Kelas Utiliti Jarak Bootstrap 4 seperti m-b- lg, yang anda cuba laksanakan dalam aplikasi React MeteorJS tanpa berjaya. Untuk menjelaskannya, mari kita terokai penggunaan dan kemas kini utiliti jarak Bootstrap.

Bootstrap 5 (beta 2021)

Sejak Bootstrap 5 memperkenalkan sokongan RTL, konsep kiri dan kanan telah digantikan dengan permulaan dan akhir, membawa kepada perubahan dalam l- dan r- utiliti jarak:

• pl-* = ps-*
• pr-* = pe-*
• ml-* = ms-*
• mr-* = saya-*

Bootstrap 4 (Kemas kini 2020)

Utiliti jarak Bootstrap 4 telah berkembang sejak keluaran alfanya. Sintaks yang dikemas kini ialah:

• Margin: m{sisi}-{saiz}
• Padding: p{sides}-{ saiz}

Contohnya:

• mb-2 = jidar bawah 2 unit jarak
• m-0 = tiada jidar
• pt-3 = padding atas 3 unit jarak
• p-1 = padding semua sisi 1 unit jarak

Bootstrap 4 menyediakan 6 saiz (0-5) yang mewakili sebahagian daripada lalai .5rem spacer unit. Selain itu, anda kini boleh menentukan utiliti paksi-x (kiri/kanan) dan paksi-y (atas/bawah):

• my-2 = unit jarak 2 margin atas & bawah
• mx-0 = tiada jidar kiri & kanan
• px-3 = padding kiri & kanan 3 unit jarak

Selain itu, utiliti jarak ini responsif, dengan titik putus terkecil (xs ) tersirat jika tiada titik putus ditentukan:

• mt-md-2 = unit jarak 2 atas margin, pada md (dan ke atas)
• py-sm-0 = tiada bahagian atas pelapik & bawah, pada sm (dan ke atas)

Atas ialah kandungan terperinci Bagaimanakah Kelas Utiliti Jarak Bootstrap Berubah dalam Bootstrap 4 dan 5?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!