Ba cột bằng nhau

Nhận ba cột có chiều rộng bằng nhau bắt đầu từ máy tính để bàn và chia tỷ lệ đến máy tính để bàn lớn . Trên thiết bị di động, máy tính bảng trở xuống, các cột sẽ tự động xếp chồng lên nhau.

.col-md-4
.col-md-4
.col-md-4

Ba cột không bằng nhau

Lấy ba cột bắt đầu từ máy tính để bàn và chia tỷ lệ đến máy tính để bàn lớn với nhiều chiều rộng khác nhau. Hãy nhớ rằng, các cột lưới phải thêm tối đa mười hai cho một khối ngang. Hơn thế nữa, và các cột bắt đầu xếp chồng bất kể khung nhìn.

.col-md-3
.col-md-6
.col-md-3

Hai cột

Lấy hai cột bắt đầu từ máy tính để bàn và mở rộng đến máy tính để bàn lớn .

.col-md-8
.col-md-4

Chiều rộng đầy đủ, cột đơn

Không có lớp lưới nào là cần thiết cho các phần tử có chiều rộng đầy đủ.


Hai cột với hai cột lồng nhau

Theo tài liệu, việc lồng rất dễ dàng — chỉ cần đặt một hàng cột trong một cột hiện có. Điều này cung cấp cho bạn hai cột bắt đầu từ máy tính để bàn và mở rộng đến máy tính để bàn lớn , với hai cột khác (chiều rộng bằng nhau) trong cột lớn hơn.

Ở kích thước thiết bị di động, máy tính bảng trở xuống, các cột này và các cột lồng nhau của chúng sẽ xếp chồng lên nhau.

.col-md-8
.col-md-6
.col-md-6
.col-md-4

Hỗn hợp: điện thoại di động và máy tính để bàn

Hệ thống lưới Bootstrap 3 có bốn tầng lớp: xs (điện thoại), sm (máy tính bảng), md (máy tính để bàn) và lg (máy tính để bàn lớn hơn). Bạn có thể sử dụng gần như bất kỳ sự kết hợp nào của các lớp này để tạo ra các bố cục năng động và linh hoạt hơn.

Mỗi tầng của các lớp sẽ mở rộng quy mô, có nghĩa là nếu bạn định đặt cùng độ rộng cho xs và sm, bạn chỉ cần chỉ định xs.

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6

Hỗn hợp: điện thoại di động, máy tính bảng và máy tính để bàn

.col-xs-12 .col-sm-6 .col-lg-8
.col-sm-6 .col-lg-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4

Xóa cột

Nổi rõ ràng tại các điểm ngắt cụ thể để tránh việc gói gọn gàng với nội dung không đồng đều.

.col-xs-6 .col-sm-3
Thay đổi kích thước khung nhìn của bạn hoặc xem thử trên điện thoại của bạn để làm ví dụ.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

Đặt lại bù đắp, đẩy và kéo

Đặt lại hiệu số, đẩy và kéo tại các điểm ngắt cụ thể.

.col-sm-5 .col-md-6
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0