Bootstrap không gian giữa các cột

Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách thay đổi kích thước khoảng cách giữa các cột (còn được gọi là máng xối) trong Bootstrap 5

Máng xối trong Bootstrap 5

Trong hệ thống lưới Bootstrap 5, máng xối là phần đệm (khoảng trống) giữa các cột là. Theo tài liệu chính thức, bản dựng mặc định của Bootstrap cho phép bạn chọn 6 giá trị khác nhau (Từ 0 đến 5). gx-0 đến gx-5 đối với chiều rộng máng xối ngang, gy-0 đến gy-5 đối với máng xối dọc hoặc g-0 đến

Ví dụ: trong lưới Bootstrap sau, máng xối được đặt thành

Và ở đây nó được đặt thành g-5

Thay đổi kích thước máng xối. cách chính thức

Thay đổi chiều rộng không gian thành một giá trị khác với những gì chúng tôi đã đề cập trước đó yêu cầu bạn chỉnh sửa nguồn Bootstrap SASS

Bạn cần thêm phạm vi giá trị mới hoặc thay đổi một giá trị hiện có và biên dịch lại giá trị đó sau đó

Tài liệu chính thức đề cập rằng các biến sau đây là các biến Bootstrap SASS để chỉnh sửa

$grid-gutter-width: 1.5rem ;
// $gutters: $spacers !default; // which are :
$gutters:  (
  0: 0,
  1: $spacer / 4,
  2: $spacer / 2,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);

Một số nhà phát triển có thể thích phương pháp này nhưng đối với trường hợp của tôi, tôi thích phương pháp sau hơn

Thay đổi kích thước máng xối bằng biến CSS

Nếu bạn xem xét kỹ các mã Bootstrap và cách nó xác định các quy tắc CSS của máng xối, bạn sẽ thấy rằng nó sử dụng các biến CSS_______0_______2 (hoặc

Từ quan sát này, chúng ta có thể suy ra một cách dễ dàng khác để thay đổi kích thước của máng xối. bằng cách xác định lại giá trị của các biến CSS này

Do đó, ví dụ, điều bạn có thể làm là định nghĩa một lớp tùy chỉnh (chẳng hạn như.

.g-custom{
    --bs-gutter-x: 2rem;
    --bs-gutter-y: 2rem;
}

Kết quả

Xin lưu ý rằng tại thời điểm này, Bootstrap 5 vẫn đang trong giai đoạn thử nghiệm nên có thể thay đổi trong phiên bản tương lai

Làm cách nào để đặt khoảng cách cột trong Bootstrap?

Làm cách nào để thêm phần đệm vào cột Bootstrap?

Làm cách nào để xóa phần đệm cột trong Bootstrap?