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.

Trên trang này

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 đặt padding-rightvà padding-lefttrên mỗi cột và sử dụng số âm marginđể bù trừ ở đầu và cuối mỗi hàng để căn chỉnh nội dung.
Máng xối bắt đầu ở 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 .containerhoặ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-fluidVí dụ: trong ví dụ sau, chúng tôi đã tăng khoảng đệm bằng .px-4:

Phần đệm cột tùy chỉnh

<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 .rowvới .overflow-hiddenlớp:

Phần đệm cột tùy chỉnh

<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 .rowcuối trang. Nếu điều này xảy ra, bạn thêm một trình bao bọc xung quanh .rowlớp .overflow-hidden:

Phần đệm cột tùy chỉnh

<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-hiddenlớp bao bọc.

Phần đệm cột tùy chỉnh

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

Cột hà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 margins từ .rowvà ngang paddingkhỏ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ẹ .containerhoặ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).

.col-sm-6 .col-md-8

.col-6 .col-md-4

<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ừ $guttersbản đồ Sass được kế thừa từ $spacersbả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,
);