Khoảng cách giữa các cột Bootstrap

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).

3 đến

4 đối với chiều rộng máng xối ngang,

5 đến

6 đối với máng xối dọc hoặc

7 đến

0 đối với máng xối dọc và ngang

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

1

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_______02 (hoặc

3) để xác định khoảng cách (và tất cả lề hoặc phần đệm của hàng hoặc cột dẫn đến

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ư.

4) và gán lại biến CSS bootstrap

2 (hoặc

3) cho lớp này. Ở đây, chúng tôi đặt giá trị thành

7 (không khả dụng với bản dựng Bootstrap mặc định)

1

2

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 để thêm khoảng cách giữa hai hàng trong Bootstrap?

Làm cách nào để đặt phần đệm trong Bootstrap?