khoảng cách

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

Trên trang này

Ký quỹ và phần đệm

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.

Sử dụng mô-đun bố cục Lưới CSS? Thay vào đó, hãy cân nhắc sử dụng tiện ích khoảng trống .

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 xxl, 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.xlxxl

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
s- (bắt đầu) cho các lớp thiết lập margin-lefthoặc padding-lefttrong LTR, margin-righthoặc padding-righttrong RTL
e- (kết thúc) cho các lớp đặt margin-righthoặc padding-righttrong LTR, margin-lefthoặc padding-lefttrong RTL
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;
}

.ms-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ể). Các lề âm này bị tắt theo mặc định , nhưng có thể được bật trong Sass bằng cách cài đặt $enable-negative-margins: true.

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;
}

Khoảng cách

Khi sử dụng display: grid, bạn có thể tận dụng các gaptiện ích trên vùng chứa lưới mẹ. Điều này có thể tiết kiệm việc phải thêm các tiện ích lề vào các mục lưới riêng lẻ (con của một vùng display: gridchứa). Các tiện ích Gap đáp ứng theo mặc định và được tạo thông qua API tiện ích của chúng tôi, dựa trên $spacersbản đồ Sass.

Mục lưới 1

Mục lưới 2

Mục lưới 3

html

<div class="d-grid gap-3">
  <div class="p-2 bg-light border">Grid item 1</div>
  <div class="p-2 bg-light border">Grid item 2</div>
  <div class="p-2 bg-light border">Grid item 3</div>
</div>

Hỗ trợ bao gồm các tùy chọn đáp ứng cho tất cả các điểm ngắt lưới của Bootstrap, cũng như sáu kích thước từ $spacersbản đồ ( 0- 5). Không có .gap-autolớp tiện ích vì nó có hiệu quả như .gap-0.

Sass

Bản đồ

Các tiện ích khoảng cách được khai báo thông qua bản đồ Sass và sau đó được tạo bằng API tiện ích của chúng tôi.

$spacer: 1rem;
$spacers: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);

API tiện ích

Các tiện ích khoảng cách được khai báo trong API tiện ích của chúng tôi trong scss/_utilities.scss. Tìm hiểu cách sử dụng API tiện ích.

    "margin": (
      responsive: true,
      property: margin,
      class: m,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-x": (
      responsive: true,
      property: margin-right margin-left,
      class: mx,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-y": (
      responsive: true,
      property: margin-top margin-bottom,
      class: my,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-top": (
      responsive: true,
      property: margin-top,
      class: mt,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-end": (
      responsive: true,
      property: margin-right,
      class: me,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-bottom": (
      responsive: true,
      property: margin-bottom,
      class: mb,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-start": (
      responsive: true,
      property: margin-left,
      class: ms,
      values: map-merge($spacers, (auto: auto))
    ),
    // Negative margin utilities
    "negative-margin": (
      responsive: true,
      property: margin,
      class: m,
      values: $negative-spacers
    ),
    "negative-margin-x": (
      responsive: true,
      property: margin-right margin-left,
      class: mx,
      values: $negative-spacers
    ),
    "negative-margin-y": (
      responsive: true,
      property: margin-top margin-bottom,
      class: my,
      values: $negative-spacers
    ),
    "negative-margin-top": (
      responsive: true,
      property: margin-top,
      class: mt,
      values: $negative-spacers
    ),
    "negative-margin-end": (
      responsive: true,
      property: margin-right,
      class: me,
      values: $negative-spacers
    ),
    "negative-margin-bottom": (
      responsive: true,
      property: margin-bottom,
      class: mb,
      values: $negative-spacers
    ),
    "negative-margin-start": (
      responsive: true,
      property: margin-left,
      class: ms,
      values: $negative-spacers
    ),
    // Padding utilities
    "padding": (
      responsive: true,
      property: padding,
      class: p,
      values: $spacers
    ),
    "padding-x": (
      responsive: true,
      property: padding-right padding-left,
      class: px,
      values: $spacers
    ),
    "padding-y": (
      responsive: true,
      property: padding-top padding-bottom,
      class: py,
      values: $spacers
    ),
    "padding-top": (
      responsive: true,
      property: padding-top,
      class: pt,
      values: $spacers
    ),
    "padding-end": (
      responsive: true,
      property: padding-right,
      class: pe,
      values: $spacers
    ),
    "padding-bottom": (
      responsive: true,
      property: padding-bottom,
      class: pb,
      values: $spacers
    ),
    "padding-start": (
      responsive: true,
      property: padding-left,
      class: ps,
      values: $spacers
    ),
    // Gap utility
    "gap": (
      responsive: true,
      property: gap,
      class: gap,
      values: $spacers
    ),