Máng xối
Gutters là phần đệm giữa các cột của bạn, được sử dụng để tạo khoảng trống và căn chỉnh nội dung trong hệ thống lưới Bootstrap.
Cách chúng hoạt động
-
Máng xối là khoảng trống giữa nội dung cột, được tạo bởi chiều ngang
padding
. Chúng tôi đặtpadding-right
vàpadding-left
trên mỗi cột và sử dụng số âmmargin
để bù trừ ở đầu và cuối mỗi hàng để căn chỉnh nội dung. -
Máng xối bắt đầu từ
1.5rem
(24px
) rộng. Điều này cho phép chúng tôi khớp lưới của mình với tỷ lệ đệm và bộ đệm lề . -
Máng xối có thể được điều chỉnh một cách nhạy bén. Sử dụng các lớp máng xối dành riêng cho điểm ngắt để sửa đổi máng xối ngang, máng xối dọc và tất cả các máng xối.
Máng xối ngang
.gx-*
các lớp có thể được sử dụng để kiểm soát chiều rộng rãnh ngang. Có thể cần phải điều chỉnh phần .container
hoặc phụ huynh nếu các máng xối lớn hơn cũng được sử dụng để tránh tràn không mong muốn, bằng cách sử dụng tiện ích đệm phù hợp. .container-fluid
Ví dụ: trong ví dụ sau, chúng tôi đã tăng khoảng đệm bằng .px-4
:
<div class="container px-4">
<div class="row gx-5">
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
</div>
Một giải pháp thay thế là thêm một trình bao bọc xung quanh .row
với .overflow-hidden
lớp:
<div class="container overflow-hidden">
<div class="row gx-5">
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
</div>
Máng xối dọc
.gy-*
các lớp có thể được sử dụng để kiểm soát chiều rộng rãnh dọc. Giống như rãnh ngang, rãnh dọc có thể gây ra một số dòng chảy bên dưới .row
cuối trang. Nếu điều này xảy ra, bạn thêm một trình bao bọc xung quanh .row
lớp .overflow-hidden
:
<div class="container overflow-hidden">
<div class="row gy-5">
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
</div>
Máng xối ngang & dọc
.g-*
các lớp có thể được sử dụng để kiểm soát chiều rộng rãnh ngang, đối với ví dụ sau, chúng tôi sử dụng chiều rộng rãnh nhỏ hơn, vì vậy sẽ không cần thêm .overflow-hidden
lớp bao bọc.
<div class="container">
<div class="row g-2">
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
</div>
Hàng cột máng xối
Các lớp máng xối cũng có thể được thêm vào các cột hàng . Trong ví dụ sau, chúng tôi sử dụng các cột hàng đáp ứng và các lớp máng xối đáp ứng.
<div class="container">
<div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
</div>
</div>
Không có máng xối
Các rãnh giữa các cột trong các lớp lưới được xác định trước của chúng tôi có thể được loại bỏ bằng .g-0
. Điều này loại bỏ các âm margin
s từ .row
và ngang padding
khỏi tất cả các cột con ngay lập tức.
Cần một thiết kế tối tân? Bỏ cha mẹ .container
hoặc .container-fluid
.
Trong thực tế, đây là cách nó trông. Lưu ý rằng bạn có thể tiếp tục sử dụng điều này với tất cả các lớp lưới được xác định trước khác (bao gồm chiều rộng cột, lớp đáp ứng, sắp xếp lại và hơn thế nữa).
<div class="row g-0">
<div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
Thay đổi máng xối
Các lớp được xây dựng từ $gutters
bản đồ Sass được kế thừa từ $spacers
bản đồ Sass.
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);