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.

Phần tử căn giữa

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

Lợi nhuận âm

Trong CSS, margincác thuộc tính có thể sử dụng các giá trị âm ( paddingkhông thể). Kể từ 4.2, chúng tôi đã thêm các tiện ích ký quỹ âm cho mọi kích thước số nguyên khác không được liệt kê ở trên (ví dụ 1: 2,,, ) . Những tiện ích này rất lý tưởng để tùy chỉnh máng xối cột lưới trên các điểm ngắt.345

Cú pháp gần giống với các tiện ích ký quỹ dương, mặc định, nhưng có thêm vào ntrước kích thước được yêu cầu. Đây là một ví dụ về lớp đối lập với .mt-1:

.mt-n1 {
  margin-top: -0.25rem !important;
}

Đây là một ví dụ về việc tùy chỉnh lưới Bootstrap tại mdđiểm ngắt phương tiện () trở lên. Chúng tôi đã tăng khoảng .colđệm với .px-md-5và sau đó chống lại điều đó với .mx-md-n5phụ huynh .row.

Phần đệm cột tùy chỉnh

<div class="row mx-md-n5">
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
</div>