khoảng cách

Bootstrap bao gồm một loạt các lớp tiện ích đệm và lề đáp ứng tốc ký để sửa đổi diện mạo của một phần tử.

Làm thế nào nó hoạt động

Gán các giá trị marginhoặc thân thiện với paddingđáp ứng cho một phần tử hoặc một tập hợp con các mặt của nó bằng các lớp tốc ký. Bao gồm hỗ trợ cho các thuộc tính riêng lẻ, tất cả các thuộc tính và các thuộc tính dọc và ngang. Các lớp được xây dựng từ một bản đồ Sass mặc định khác nhau, từ .25remđến 3rem.

Ký hiệu

Các tiện ích giãn cách áp dụng cho tất cả các điểm ngắt, từ xsđến xl, không có chữ viết tắt điểm ngắt trong chúng. Điều này là do các lớp đó được áp dụng từ min-width: 0trở lên và do đó không bị ràng buộc bởi một truy vấn phương tiện. Tuy nhiên, các điểm ngắt còn lại bao gồm chữ viết tắt của điểm ngắt.

Các lớp được đặt tên bằng cách sử dụng định dạng {property}{sides}-{size}for xsvà {property}{sides}-{breakpoint}-{size}for sm, mdvà lg.xl

Trường hợp tài sản là một trong:

• m- đối với các lớp đã thiết lậpmargin
• p- đối với các lớp đã thiết lậppadding

Trong đó các bên là một trong:

• t- cho các lớp thiết lập margin-tophoặcpadding-top
• b- cho các lớp thiết lập margin-bottomhoặcpadding-bottom
• l- cho các lớp thiết lập margin-lefthoặcpadding-left
• r- cho các lớp thiết lập margin-righthoặcpadding-right
• x- cho các lớp đặt cả *-leftvà*-right
• y- cho các lớp đặt cả *-topvà*-bottom
• trống - cho các lớp đặt a marginhoặc paddingtrên cả 4 cạnh của phần tử

Trong đó kích thước là một trong:

• 0- đối với các lớp loại bỏ marginhoặc paddingbằng cách đặt nó thành0
• 1- (theo mặc định) cho các lớp đặt marginhoặcpadding$spacer * .25
• 2- (theo mặc định) cho các lớp đặt marginhoặcpadding$spacer * .5
• 3- (theo mặc định) cho các lớp đặt marginhoặcpadding$spacer
• 4- (theo mặc định) cho các lớp đặt marginhoặcpadding$spacer * 1.5
• 5- (theo mặc định) cho các lớp đặt marginhoặcpadding$spacer * 3
• auto- đối với các lớp đặt thành margintự động

(Bạn có thể thêm nhiều kích thước hơn bằng cách thêm các mục nhập vào $spacersbiến bản đồ Sass.)

Các ví dụ

Dưới đây là một số ví dụ tiêu biểu về các lớp này:

.mt-0 {
  margin-top: 0 !important;
}

.ml-1 {
  margin-left: ($spacer * .25) !important;
}

.px-2 {
  padding-left: ($spacer * .5) !important;
  padding-right: ($spacer * .5) !important;
}

.p-3 {
  padding: $spacer !important;
}

Căn giữa theo chiều ngang

Ngoài ra, Bootstrap cũng bao gồm một .mx-autolớp để căn giữa theo chiều ngang nội dung cấp khối có chiều rộng cố định — nghĩa là, nội dung có display: blockvà một widthtập hợp — bằng cách đặt các lề ngang thành auto.

<div class="mx-auto" style="width: 200px;">
  Centered element
</div>