Hộp đựng

Cách chúng hoạt động

Vùng chứa là phần tử bố cục cơ bản nhất trong Bootstrap và được yêu cầu khi sử dụng hệ thống lưới mặc định của chúng tôi . Các vùng chứa được sử dụng để chứa, đệm và (đôi khi) căn giữa nội dung bên trong chúng. Trong khi các vùng chứa có thể được lồng vào nhau, hầu hết các bố cục không yêu cầu vùng chứa lồng nhau.

Bootstrap đi kèm với ba vùng chứa khác nhau:

• .container, đặt một max-widthtại mỗi điểm ngắt đáp ứng
• .container-{breakpoint}, width: 100%cho đến khi điểm ngắt được chỉ định
• .container-fluid, đó là width: 100%tất cả các điểm ngắt

Bảng dưới đây minh họa cách mỗi vùng chứa max-widthso sánh với bản gốc .containervà .container-fluidtrên mỗi điểm ngắt.

Xem chúng hoạt động và so sánh chúng trong ví dụ Grid của chúng tôi .

Vùng chứa mặc định

Lớp mặc định của chúng tôi .containerlà một vùng chứa đáp ứng, có chiều rộng cố định, có nghĩa là các max-widththay đổi của nó tại mỗi điểm ngắt.

<div class="container">
  <!-- Content here -->
</div>

Vùng chứa đáp ứng

Vùng chứa đáp ứng cho phép bạn chỉ định một lớp có độ rộng 100% cho đến khi đạt đến điểm ngắt được chỉ định, sau đó chúng tôi áp dụng max-widths cho từng điểm ngắt cao hơn. Ví dụ: .container-smrộng 100% để bắt đầu cho đến khi smđạt đến điểm ngắt, nơi nó sẽ mở rộng quy mô với md, lgvà xl.xxl

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>

Thùng chứa chất lỏng

Sử dụng .container-fluidcho vùng chứa có chiều rộng đầy đủ, kéo dài toàn bộ chiều rộng của chế độ xem.

<div class="container-fluid">
  ...
</div>

Sass

Như được hiển thị ở trên, Bootstrap tạo ra một loạt các lớp vùng chứa được xác định trước để giúp bạn xây dựng các bố cục mà bạn mong muốn. Bạn có thể tùy chỉnh các lớp vùng chứa được xác định trước này bằng cách sửa đổi bản đồ Sass (được tìm thấy trong _variables.scss) cung cấp năng lượng cho chúng:

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

Ngoài việc tùy chỉnh Sass, bạn cũng có thể tạo các thùng chứa của riêng mình với Sass mixin của chúng tôi.

// Source mixin
@mixin make-container($padding-x: $container-padding-x) {
  width: 100%;
  padding-right: $padding-x;
  padding-left: $padding-x;
  margin-right: auto;
  margin-left: auto;
}

// Usage
.custom-container {
  @include make-container();
}

Để biết thêm thông tin và ví dụ về cách sửa đổi bản đồ và biến Sass của chúng tôi, vui lòng tham khảo phần Sass của tài liệu Grid .