Bài đăng này sẽ thảo luận về không gian máng xối là gì và cách loại bỏ chúng cho một div cụ thể trong Bootstrap.
Gutter Space trong Bootstrap là gì?
Máng xối là khoảng trống hoặc khoảng trống giữa các cột được tạo ra bởi đệm ngang. Chúng được sử dụng để hỗ trợ căn chỉnh nội dung đáp ứng và khoảng trống trong hệ thống lưới Bootstrap.
Hình ảnh bên dưới hiển thị một hàng có viền đỏ xung quanh. Trong hàng, tồn tại ba phần tử div có kích thước bằng nhau của các cột lưới bằng nhau. Mặc dù các cột bằng nhau nhưng vẫn có khoảng trống giữa chúng:
Làm cách nào để xóa Gutter Space cho một div cụ thể trong Bootstrap?
Trong Bootstrap, lớp “ không có máng xối ” được sử dụng để loại bỏ khoảng trống của bất kỳ div nào.
Vì mục đích này:
- thêm một “ ” gắn thẻ cùng với lớp “ div chính ”.
- Sau đó, điều chỉnh một phần hàng bằng cách thêm một “
” phần tử với lớp “ chèo thuyền ”. Vì chúng ta phải xóa khoảng trắng khỏi hàng, hãy chỉ định một lớp “ không có máng xối ” bên trong nó.- Để chia hàng lưới thành ba cột bằng nhau, hãy sử dụng lớp “ col-4 ”.
- Trong vùng chứa “
” của mỗi cột, hãy điều chỉnh các phần tử “” bằng các lớp “ cột-1 ”, “ cột-2 ', và ' cột-3 ', tương ứng: < div tầng lớp = 'div chính' >
< div tầng lớp = 'hàng không có máng xối' >
< div tầng lớp = 'col-4' >
< div tầng lớp = 'cột-1' >< / div >
< / div >
< div tầng lớp = 'col-4' >
< div tầng lớp = 'cột-2' >< / div >
< / div >
< div tầng lớp = 'col-4' >
< div tầng lớp = 'cột-3' >< / div >
< / div >
< / div >
< / div >CSS
Trong phần CSS, các lớp được đề cập trong trang HTML được tạo kiểu với một số thuộc tính kiểu dáng.
Phong cách lớp 'main-div'
.main-div {
bề rộng : 600px;
lề: 50px tự động;
}Các ' .main-div ” được đề cập để truy cập phần tử div có lớp “ div chính ”. Các thuộc tính sau được áp dụng cho lớp này:
- “ bề rộng ” xác định chiều rộng của phần tử.
- “ lề ” đặt khoảng cách xung quanh phần tử.
Phong cách “hàng” đẳng cấp
.chèo thuyền {
biên giới : 1px màu đỏ đặc;
}Bootstrap “ chèo thuyền ” lớp được thêm vào với “ biên giới ' tài sản. Thao tác này sẽ bọc hàng lưới theo chiều rộng, kiểu và đường viền màu đã chỉ định.
Ba lớp “ cột-1 ”, “ cột-2 ', và ' cột-3 ” được gán CSS “ màu nền ' và ' chiều cao ” thuộc tính để làm cho chúng nổi bật.
Kiểu “cột-1” lớp
.cột- một {
lai lịch- màu : xanh ngọc;
chiều cao : 200px;
}Kiểu “cột-2” lớp
.cột- 2 {
lai lịch- màu : màu tím;
chiều cao : 200px;
}Kiểu “cột-3” lớp
.cột- 3 {
lai lịch- màu : vàng lục;
chiều cao : 200px;
}Có thể nhận thấy rằng “
” vùng chứa với lớp “ chèo thuyền ” đã được điều chỉnh thành công mà không có khoảng trống giữa chúng:
Chúng tôi đã hướng dẫn bạn cách xóa khoảng trống cho một div cụ thể trong Bootstrap.
Phần kết luận
Để loại bỏ các khoảng trống cho một div cụ thể, lớp “ không có máng xối ' có thể được sử dụng. Với mục đích này, hãy thêm “
” phần tử cùng với phần tử “ hàng không có máng xối ' tầng lớp. Bài đăng này đã cung cấp một hướng dẫn toàn diện về không gian máng xối và cách loại bỏ chúng cho một div cụ thể trong Bootstrap. - Sau đó, điều chỉnh một phần hàng bằng cách thêm một “