Bootstrap cột linh hoạt

Hệ thống lưới của Bootstrap sử dụng một loạt các vùng chứa, hàng và cột để bố trí và căn chỉnh nội dung. Nó được xây dựng với flexbox và hoàn toàn đáp ứng. Dưới đây là một ví dụ và một cái nhìn sâu sắc về cách lưới kết hợp với nhau

Mới hoặc chưa quen với flexbox?

Thùng đựng hàng#

Vùng chứa cung cấp phương tiện để căn giữa và đệm theo chiều ngang cho nội dung trang web của bạn. Sử dụng

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample() {
export default ContainerFluidExample;

3 để có chiều rộng pixel đáp ứng

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerExample() {
export default ContainerExample;

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

Bạn có thể sử dụng

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample() {
export default ContainerFluidExample;

4 cho chiều rộng. 100% trên tất cả các kích thước khung nhìn và thiết bị

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample() {
export default ContainerFluidExample;

Bạn có thể đặt điểm dừng cho giá đỡ

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample() {
export default ContainerFluidExample;

5. Đặt nó thành điểm dừng (

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample() {
export default ContainerFluidExample;

6) sẽ đặt

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample() {
export default ContainerFluidExample;

3 ở dạng linh hoạt cho đến điểm dừng được chỉ định

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidBreakpointExample() {
export default ContainerFluidBreakpointExample;

Cột tự động bố trí #

Khi không có độ rộng cột nào được chỉ định, thành phần

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample() {
export default ContainerFluidExample;

8 sẽ hiển thị các cột có độ rộng bằng nhau

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function AutoLayoutExample() {
export default AutoLayoutExample;

Đặt chiều rộng một cột#

Bố cục tự động cho các cột lưới flexbox cũng có nghĩa là bạn có thể đặt chiều rộng của một cột và để các cột anh chị em tự động thay đổi kích thước xung quanh cột đó. Bạn có thể sử dụng các lớp lưới được xác định trước (như được hiển thị bên dưới), hỗn hợp lưới hoặc độ rộng nội tuyến. Lưu ý rằng các cột khác sẽ thay đổi kích thước bất kể chiều rộng của cột trung tâm

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';



import Col from 'react-bootstrap/Col';
function ContainerExample() {
export default ContainerExample;

0

Nội dung chiều rộng thay đổi #

Đặt giá trị cột (cho bất kỳ kích thước điểm dừng nào) thành

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample() {
export default ContainerFluidExample;

9 để định kích thước cột dựa trên chiều rộng tự nhiên của nội dung của chúng

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerExample() {
export default ContainerExample;

2

Lưới đáp ứng #

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample() {
export default ContainerFluidExample;

8 cho phép bạn chỉ định độ rộng cột trên 6 kích thước điểm dừng (xs, sm, md, lg, xl và xxl). Đối với mỗi điểm ngắt, bạn có thể chỉ định số lượng cột cần mở rộng hoặc đặt giá đỡ thành độ rộng bố cục tự động

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerExample() {
export default ContainerExample;

4

Bạn cũng có thể trộn và kết hợp các điểm dừng để tạo các lưới khác nhau tùy thuộc vào kích thước màn hình

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerExample() {
export default ContainerExample;

5

Props

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample() {
export default ContainerFluidExample;

8 breakpoint cũng có dạng prop72 phức tạp hơn.

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidBreakpointExample() {
export default ContainerFluidBreakpointExample;

3 để chỉ định độ lệch và hiệu ứng đặt hàng

Bạn có thể sử dụng thuộc tính

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidBreakpointExample() {
export default ContainerFluidBreakpointExample;

4 để kiểm soát thứ tự trực quan của nội dung

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample() {
export default ContainerFluidExample;

0

Tài sản

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidBreakpointExample() {
export default ContainerFluidBreakpointExample;

4 cũng hỗ trợ

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidBreakpointExample() {
export default ContainerFluidBreakpointExample;

6 (_______77) và

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidBreakpointExample() {
export default ContainerFluidBreakpointExample;

8 (

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidBreakpointExample() {
export default ContainerFluidBreakpointExample;

9)

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample() {
export default ContainerFluidExample;

6

Để bù trừ các cột lưới, bạn có thể đặt giá trị

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function AutoLayoutExample() {
export default AutoLayoutExample;

0 hoặc để có bố cục tổng quát hơn, hãy sử dụng các tiện ích của lớp lề

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample() {
export default ContainerFluidExample;

0

Đặt độ rộng cột trong Row#

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function AutoLayoutExample() {
export default AutoLayoutExample;

1 cho phép bạn chỉ định độ rộng cột trên 6 kích thước điểm ngắt (xs, sm, md, lg, xl và xxl). Đối với mỗi điểm dừng, bạn có thể chỉ định số lượng cột sẽ khớp với nhau. Bạn cũng có thể chỉ định

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample() {
export default ContainerFluidExample;

9 để đặt các cột theo chiều rộng tự nhiên của chúng

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample() {
export default ContainerFluidExample;

1

Lưu ý rằng chiều rộng của cột

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function AutoLayoutExample() {
export default AutoLayoutExample;

1 sẽ ghi đè chiều rộng của cột

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample() {
export default ContainerFluidExample;

8 được đặt ở các điểm dừng thấp hơn khi được xem trên màn hình lớn hơn. Kích thước sẽ bị ghi đè bởi

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';



import Col from 'react-bootstrap/Col';
function ContainerFluidExample() {
export default ContainerFluidExample;

4 trên màn hình trung bình và lớn hơn

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample() {
export default ContainerFluidExample;

2

API #

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function AutoLayoutExample() {
export default AutoLayoutExample;

6Sao chép mã nhập cho thành phần Vùng chứa

TênLoạiMặc địnhMô tả

Bạn có thể sử dụng một yếu tố tùy chỉnh cho thành phần này

dịch

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function AutoLayoutExample() {
export default AutoLayoutExample;

7.

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function AutoLayoutExample() {
export default AutoLayoutExample;

8.

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function AutoLayoutExample() {
export default AutoLayoutExample;

9.

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerExample() {
export default ContainerExample;

00.

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerExample() {
export default ContainerExample;

01.

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerExample() {
export default ContainerExample;

02

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerExample() {
export default ContainerExample;

03

Cho phép Vùng chứa lấp đầy tất cả không gian ngang có sẵn của nó

bsPrefix

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerExample() {
export default ContainerExample;

04

Thay đổi tên lớp cơ sở CSS thành phần cơ bản và tiền tố tên lớp sửa đổi. Đây là một lối thoát hiểm để làm việc với css bootstrap được tùy chỉnh nhiều

Cột flex trong bootstrap là gì?

Flex có hoạt động với Bootstrap không?

Sự khác biệt giữa hàng và cột hướng Flex là gì?

Lưới bootstrap có linh hoạt không?