Containers

Container là một khối dựng sẵn cơ bản của Bootstrap nó chứa đựng, đệm, và căn chỉnh nội dung của bạn ở trong một thiết bị hoặc viewport đã cho.

Cách chúng làm việc

Container là phần tử layout cơ bản nhất trong Bootstrap và là bắt buộc khi sử dụng hệ thống lưới mặc định của chúng tôi. Container được sử dụng để chứa đựng, đệm, và (thỉnh thoảng) đặt nội dung vào giữa. Mặc dù các container có thể được lồng nhau, nhưng hầu hết các layout không bắt buộc một container được lồng nhau.

Bootstrap đến với ba container khác nhau:

1. .container, nó thiết lập một max-width tại mỗi responsive breakpoint.
2. .container-{breakpoint}, nó có chiều rộng là: 100% cho đến khi breakpoint được chỉ định.
3. .container-fluid, nó có chiều rộng là: 100% tại tất cả các breakpoint.

Table bên dưới minh họa cách chiều rộng tối đa của mỗi container so sánh với .container gốc và .container-fluid trên mỗi breakpoint.

Container mặc định

.container mặc định của chúng tôi là một responsive container có chiều rộng cố định, có nghĩa là max-width của nó sẽ thay đổi tại mỗi breakpoint.

Các responsive container

Các responsive container cho phép bạn chỉ định một class có độ rộng là 100% cho đến khi đạt đến breakpoint được chỉ định, sau đó chúng tôi áp dụng max-width cho từng breakpoint cao hơn. Ví dụ, .container-sm sẽ có độ rộng là 100% cho đến khi đạt đến sm breakpoint, sau đó chúng tôi áp dụng max-width cho từng breakpoint cao hơn là md, lg, xl, và xxl.

Các fluid container

Hãy sử dụng .container-fluid cho một container có chiều rộng toàn bộ, nó sẽ kéo dài qua toàn bộ chiều rộng của viewport.

Sass variables

Như được trình bày ở trên, Bootstrap tạo ra một loạt các container class đã được định nghĩa trước để giúp bạn xây dựng layout mà bạn mong muốn. Bạn có thể tùy chỉnh các container class đã được định nghĩa trước này bằng cách chỉnh sửa tập tin Sass map ( _variables.scss):

Sass mixins

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