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
0 đối với máng xối dọc và ngangVí 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_______0_______2 [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].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