Hướng dẫn bootstrap custom grid columns - cột lưới tùy chỉnh bootstrap

 class="container">
   class="row">
     class="col-sm">
      One of three columns
    

Ví dụ trên tạo ra ba cột có chiều rộng bằng nhau trên các thiết bị nhỏ, trung bình, lớn và cực lớn bằng các lớp lưới được xác định trước của chúng tôi. Các cột đó được tập trung trong trang với cha mẹ

 class="container">
   class="row">
     class="col">Column
 class="col">Column
 class="w-100">
 class="col">Column
 class="col">Column

Phá vỡ nó, ở đây, cách thức hoạt động của nó:

• Các container cung cấp một phương tiện để trung tâm và theo chiều ngang nội dung trang web của bạn. Sử dụng

   class="container">
     class="row">
       class="col">Column
       class="col">Column
       class="w-100">
       class="col">Column
       class="col">Column
    
  

  9 cho chiều rộng pixel đáp ứng hoặc

   class="container">
     class="row">
       class="col">
        1 of 3
      
       class="col-6">
        2 of 3 (wider)
      
       class="col">
        3 of 3
      
    
     class="row">
       class="col">
        1 of 3
      
       class="col-5">
        2 of 3 (wider)
      
       class="col">
        3 of 3
      
    
  

  1 cho

   class="container">
     class="row">
       class="col">
        1 of 3
      
       class="col-6">
        2 of 3 (wider)
      
       class="col">
        3 of 3
      
    
     class="row">
       class="col">
        1 of 3
      
       class="col-5">
        2 of 3 (wider)
      
       class="col">
        3 of 3
      
    
  

  2 trên tất cả các kích thước chế độ xem và thiết bị.
• Hàng là giấy gói cho các cột. Mỗi cột có ngang

   class="container">
     class="row">
       class="col">
        1 of 3
      
       class="col-6">
        2 of 3 (wider)
      
       class="col">
        3 of 3
      
    
     class="row">
       class="col">
        1 of 3
      
       class="col-5">
        2 of 3 (wider)
      
       class="col">
        3 of 3
      
    
  

  3 (được gọi là máng xối) để kiểm soát khoảng trống giữa chúng. Điều này

   class="container">
     class="row">
       class="col">
        1 of 3
      
       class="col-6">
        2 of 3 (wider)
      
       class="col">
        3 of 3
      
    
     class="row">
       class="col">
        1 of 3
      
       class="col-5">
        2 of 3 (wider)
      
       class="col">
        3 of 3
      
    
  

  3 sau đó được chống lại trên các hàng có tỷ suất lợi nhuận âm. Bằng cách này, tất cả các nội dung trong các cột của bạn được căn chỉnh trực quan ở phía bên trái.
• Trong bố cục lưới, nội dung phải được đặt trong các cột và chỉ các cột có thể là trẻ em ngay lập tức của các hàng.
• Nhờ Flexbox, các cột lưới mà không có

   class="container">
     class="row">
       class="col">
        1 of 3
      
       class="col-6">
        2 of 3 (wider)
      
       class="col">
        3 of 3
      
    
     class="row">
       class="col">
        1 of 3
      
       class="col-5">
        2 of 3 (wider)
      
       class="col">
        3 of 3
      
    
  

  5 được chỉ định sẽ tự động bố trí dưới dạng các cột có chiều rộng bằng nhau. Ví dụ, bốn trường hợp

   class="container">
     class="row">
       class="col">
        1 of 3
      
       class="col-6">
        2 of 3 (wider)
      
       class="col">
        3 of 3
      
    
     class="row">
       class="col">
        1 of 3
      
       class="col-5">
        2 of 3 (wider)
      
       class="col">
        3 of 3
      
    
  

  6 sẽ tự động rộng 25% so với điểm dừng nhỏ và lên. Xem phần Cột Tự động Layout để biết thêm ví dụ.
• Các lớp cột cho biết số lượng cột mà bạn muốn sử dụng trong số 12 có thể có mỗi hàng. Vì vậy, nếu bạn muốn có ba cột có chiều rộng bằng nhau, bạn có thể sử dụng

   class="container">
     class="row">
       class="col">
        1 of 3
      
       class="col-6">
        2 of 3 (wider)
      
       class="col">
        3 of 3
      
    
     class="row">
       class="col">
        1 of 3
      
       class="col-5">
        2 of 3 (wider)
      
       class="col">
        3 of 3
      
    
  

  7.
• Cột

   class="container">
     class="row">
       class="col">
        1 of 3
      
       class="col-6">
        2 of 3 (wider)
      
       class="col">
        3 of 3
      
    
     class="row">
       class="col">
        1 of 3
      
       class="col-5">
        2 of 3 (wider)
      
       class="col">
        3 of 3
      
    
  

  5 được đặt theo tỷ lệ phần trăm, vì vậy chúng luôn luôn là chất lỏng và kích thước so với yếu tố cha mẹ của họ.
• Các cột có ngang

   class="container">
     class="row">
       class="col">
        1 of 3
      
       class="col-6">
        2 of 3 (wider)
      
       class="col">
        3 of 3
      
    
     class="row">
       class="col">
        1 of 3
      
       class="col-5">
        2 of 3 (wider)
      
       class="col">
        3 of 3
      
    
  

  3 để tạo máng xối giữa các cột riêng lẻ, tuy nhiên, bạn có thể loại bỏ

   class="container">
     class="row justify-content-md-center">
       class="col col-lg-2">
        1 of 3
      
       class="col-md-auto">
        Variable width content
      
       class="col col-lg-2">
        3 of 3
      
    
     class="row">
       class="col">
        1 of 3
      
       class="col-md-auto">
        Variable width content
      
       class="col col-lg-2">
        3 of 3
      
    
  

  0 khỏi các hàng và

   class="container">
     class="row">
       class="col">
        1 of 3
      
       class="col-6">
        2 of 3 (wider)
      
       class="col">
        3 of 3
      
    
     class="row">
       class="col">
        1 of 3
      
       class="col-5">
        2 of 3 (wider)
      
       class="col">
        3 of 3
      
    
  

  3 khỏi các cột có

   class="container">
     class="row justify-content-md-center">
       class="col col-lg-2">
        1 of 3
      
       class="col-md-auto">
        Variable width content
      
       class="col col-lg-2">
        3 of 3
      
    
     class="row">
       class="col">
        1 of 3
      
       class="col-md-auto">
        Variable width content
      
       class="col col-lg-2">
        3 of 3
      
    
  

  2 trên

   class="container">
     class="row justify-content-md-center">
       class="col col-lg-2">
        1 of 3
      
       class="col-md-auto">
        Variable width content
      
       class="col col-lg-2">
        3 of 3
      
    
     class="row">
       class="col">
        1 of 3
      
       class="col-md-auto">
        Variable width content
      
       class="col col-lg-2">
        3 of 3
      
    
  

  3.
• Để làm cho lưới đáp ứng, có năm điểm dừng lưới, một điểm cho mỗi điểm dừng đáp ứng: tất cả các điểm dừng (thêm nhỏ), nhỏ, trung bình, lớn và cực lớn.
• Các điểm dừng lưới được dựa trên các truy vấn phương tiện có chiều rộng tối thiểu, nghĩa là chúng áp dụng cho một điểm dừng đó và tất cả những người ở trên (ví dụ:

   class="container">
     class="row justify-content-md-center">
       class="col col-lg-2">
        1 of 3
      
       class="col-md-auto">
        Variable width content
      
       class="col col-lg-2">
        3 of 3
      
    
     class="row">
       class="col">
        1 of 3
      
       class="col-md-auto">
        Variable width content
      
       class="col col-lg-2">
        3 of 3
      
    
  

  4 áp dụng cho các thiết bị nhỏ, vừa, lớn và cực lớn, nhưng không phải là điểm dừng

   class="container">
     class="row justify-content-md-center">
       class="col col-lg-2">
        1 of 3
      
       class="col-md-auto">
        Variable width content
      
       class="col col-lg-2">
        3 of 3
      
    
     class="row">
       class="col">
        1 of 3
      
       class="col-md-auto">
        Variable width content
      
       class="col col-lg-2">
        3 of 3
      
    
  

  5 đầu tiên).they apply to that one breakpoint and all those above it (e.g.,

   class="container">
     class="row justify-content-md-center">
       class="col col-lg-2">
        1 of 3
      
       class="col-md-auto">
        Variable width content
      
       class="col col-lg-2">
        3 of 3
      
    
     class="row">
       class="col">
        1 of 3
      
       class="col-md-auto">
        Variable width content
      
       class="col col-lg-2">
        3 of 3
      
    
  

  4 applies to small, medium, large, and extra large devices, but not the first

   class="container">
     class="row justify-content-md-center">
       class="col col-lg-2">
        1 of 3
      
       class="col-md-auto">
        Variable width content
      
       class="col col-lg-2">
        3 of 3
      
    
     class="row">
       class="col">
        1 of 3
      
       class="col-md-auto">
        Variable width content
      
       class="col col-lg-2">
        3 of 3
      
    
  

  5 breakpoint).
• Bạn có thể sử dụng các lớp lưới được xác định trước (như

   class="container">
     class="row">
       class="col">
        1 of 3
      
       class="col-6">
        2 of 3 (wider)
      
       class="col">
        3 of 3
      
    
     class="row">
       class="col">
        1 of 3
      
       class="col-5">
        2 of 3 (wider)
      
       class="col">
        3 of 3
      
    
  

  7) hoặc hỗn hợp SASS để đánh dấu ngữ nghĩa hơn.

Hãy nhận biết các hạn chế và lỗi xung quanh Flexbox, như không có khả năng sử dụng một số yếu tố HTML làm thùng chứa flex.

Tùy chọn lưới

Mặc dù Bootstrap sử dụng

 class="container">
   class="row justify-content-md-center">
     class="col col-lg-2">
      1 of 3
    
     class="col-md-auto">
      Variable width content
    
     class="col col-lg-2">
      3 of 3
    
  
   class="row">
     class="col">
      1 of 3
    
     class="col-md-auto">
      Variable width content
    
     class="col col-lg-2">
      3 of 3
    
  

 class="container">
   class="row justify-content-md-center">
     class="col col-lg-2">
      1 of 3
    
     class="col-md-auto">
      Variable width content
    
     class="col col-lg-2">
      3 of 3
    
  
   class="row">
     class="col">
      1 of 3
    
     class="col-md-auto">
      Variable width content
    
     class="col col-lg-2">
      3 of 3
    
  

 class="container">
   class="row justify-content-md-center">
     class="col col-lg-2">
      1 of 3
    
     class="col-md-auto">
      Variable width content
    
     class="col col-lg-2">
      3 of 3
    
  
   class="row">
     class="col">
      1 of 3
    
     class="col-md-auto">
      Variable width content
    
     class="col col-lg-2">
      3 of 3
    
  

Xem cách các khía cạnh của hệ thống lưới bootstrap hoạt động trên nhiều thiết bị với một bảng tiện dụng.

 class="row">
   class="col">col
   class="col">col
   class="w-100">
   class="col">col
   class="col">col

 class="row">
   class="col">col
   class="col">col
   class="w-100">
   class="col">col
   class="col">col

 class="row">
   class="col">col
   class="col">col
   class="w-100">
   class="col">col
   class="col">col

 class="row">
   class="col">col
   class="col">col
   class="w-100">
   class="col">col
   class="col">col

 class="row">
   class="col">col
   class="col">col
   class="w-100">
   class="col">col
   class="col">col

Đặt hàng cột

Các cột tự động

Equal-width

Sử dụng các lớp cột dành riêng cho điểm dừng để có kích thước cột dễ dàng mà không cần một lớp được đánh số rõ ràng như

 class="row">
   class="col">col
   class="col">col
   class="w-100">
   class="col">col
   class="col">col

 class="container">
   class="row">
     class="col">
      1 of 2
    
     class="col">
      2 of 2
    
  
   class="row">
     class="col">
      1 of 3
    
     class="col">
      2 of 3
    
     class="col">
      3 of 3
    
  

Ví dụ: đây là hai bố cục lưới áp dụng cho mọi thiết bị và chế độ xem, từ

 class="container">
   class="row justify-content-md-center">
     class="col col-lg-2">
      1 of 3
    
     class="col-md-auto">
      Variable width content
    
     class="col col-lg-2">
      3 of 3
    
  
   class="row">
     class="col">
      1 of 3
    
     class="col-md-auto">
      Variable width content
    
     class="col col-lg-2">
      3 of 3
    
  

 class="row">
   class="col">col
   class="col">col
   class="w-100">
   class="col">col
   class="col">col

Các cột có chiều rộng bằng nhau có thể được chia thành nhiều dòng, nhưng có một lỗi Flexari Flexari đã ngăn không cho điều này hoạt động mà không có

 class="row">
   class="col">col
   class="col">col
   class="w-100">
   class="col">col
   class="col">col

 class="row">
   class="col">col
   class="col">col
   class="w-100">
   class="col">col
   class="col">col

Các cột có chiều rộng bằng nhau có thể được chia thành nhiều dòng, nhưng có một lỗi Flexari Flexari đã ngăn không cho điều này hoạt động mà không có

 class="row">
   class="col">col
   class="col">col
   class="w-100">
   class="col">col
   class="col">col

 class="row">
   class="col">col
   class="col">col
   class="w-100">
   class="col">col
   class="col">col

Các cột có chiều rộng bằng nhau có thể được chia thành nhiều dòng, nhưng có một lỗi Flexari Flexari đã ngăn không cho điều này hoạt động mà không có

 class="row">
   class="col">col
   class="col">col
   class="w-100">
   class="col">col
   class="col">col

 class="row">
   class="col">col
   class="col">col
   class="w-100">
   class="col">col
   class="col">col

Các cột có chiều rộng bằng nhau có thể được chia thành nhiều dòng, nhưng có một lỗi Flexari Flexari đã ngăn không cho điều này hoạt động mà không có

 class="row">
   class="col">col
   class="col">col
   class="w-100">
   class="col">col
   class="col">col

 class="row">
   class="col">col
   class="col">col
   class="w-100">
   class="col">col
   class="col">col

 class="container">
   class="row">
     class="col">Column
     class="col">Column
     class="w-100">
     class="col">Column
     class="col">Column
  

Cột

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

Tự động-Layout 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 cột anh chị em tự động thay đổi kích thước xung quanh nó. Bạn có thể sử dụng các lớp lưới được xác định trước (như hiển thị bên dưới), mixin lưới hoặc chiều 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.

1 trong 3

2 trên 3 (rộng hơn)

Tự động-Layout 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 cột anh chị em tự động thay đổi kích thước xung quanh nó. Bạn có thể sử dụng các lớp lưới được xác định trước (như hiển thị bên dưới), mixin lưới hoặc chiều 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.

2 trên 3 (rộng hơn)

3 trên 3

 class="container">
   class="row">
     class="col">
      1 of 3
    
     class="col-6">
      2 of 3 (wider)
    
     class="col">
      3 of 3
    
  
   class="row">
     class="col">
      1 of 3
    
     class="col-5">
      2 of 3 (wider)
    
     class="col">
      3 of 3
    
  

Nội dung chiều rộng biến

Sử dụng các lớp

 class="row">
   class="col">col
   class="col">col
   class="col">col
   class="col">col

 class="row">
   class="col-8">col-8
   class="col-4">col-4

1 trong 3

Nội dung chiều rộng biến

3 trên 3

1 trong 3

Nội dung chiều rộng biến

3 trên 3

 class="container">
   class="row justify-content-md-center">
     class="col col-lg-2">
      1 of 3
    
     class="col-md-auto">
      Variable width content
    
     class="col col-lg-2">
      3 of 3
    
  
   class="row">
     class="col">
      1 of 3
    
     class="col-md-auto">
      Variable width content
    
     class="col col-lg-2">
      3 of 3
    
  

Nội dung chiều rộng biến

Sử dụng các lớp

 class="row">
   class="col">col
   class="col">col
   class="col">col
   class="col">col

 class="row">
   class="col-8">col-8
   class="col-4">col-4

 class="row">
   class="col">col
   class="col">col
   class="w-100">
   class="col">col
   class="col">col

1 trong 3

Nội dung chiều rộng biến

Multi-Row ngang bằng nhau

Tạo các cột có chiều rộng bằng nhau kéo dài nhiều hàng bằng cách chèn

 class="row">
   class="col">col
   class="col">col
   class="col">col
   class="col">col

 class="row">
   class="col-8">col-8
   class="col-4">col-4

 class="row">
   class="col">col
   class="col">col
   class="col">col
   class="col">col

 class="row">
   class="col-8">col-8
   class="col-4">col-4

 class="row">
   class="col">col
   class="col">col
   class="col">col
   class="col">col

 class="row">
   class="col-8">col-8
   class="col-4">col-4

Các lớp đáp ứng

Lưới Bootstrap, bao gồm năm tầng của các lớp được xác định trước để xây dựng bố cục đáp ứng phức tạp. Tùy chỉnh kích thước của các cột của bạn trên các thiết bị cực nhỏ, nhỏ, trung bình, lớn hoặc cực lớn tuy nhiên bạn thấy phù hợp.

 class="row">
   class="col-sm-8">col-sm-8
   class="col-sm-4">col-sm-4

 class="row">
   class="col-sm">col-sm
   class="col-sm">col-sm
   class="col-sm">col-sm

Tất cả các điểm dừng

Đối với các lưới giống nhau từ các thiết bị nhỏ nhất đến lớn nhất, hãy sử dụng các lớp

 class="row">
   class="col">col
   class="col">col
   class="col">col
   class="col">col

 class="row">
   class="col-8">col-8
   class="col-4">col-4

 class="row">
   class="col">col
   class="col">col
   class="col">col
   class="col">col

 class="row">
   class="col-8">col-8
   class="col-4">col-4

 class="row">
   class="col">col
   class="col">col
   class="col">col
   class="col">col

 class="row">
   class="col-8">col-8
   class="col-4">col-4

Xếp chồng lên nhau

Sử dụng một tập hợp các lớp

 class="row">
   class="col">col
   class="col">col
   class="col">col
   class="col">col

 class="row">
   class="col-8">col-8
   class="col-4">col-4

 class="row">
   class="col">col
   class="col">col
   class="col">col
   class="col">col

 class="row">
   class="col-8">col-8
   class="col-4">col-4

Sử dụng một tập hợp các lớp

 class="row">
   class="col">col
   class="col">col
   class="col">col
   class="col">col

 class="row">
   class="col-8">col-8
   class="col-4">col-4

 class="row">
   class="col">col
   class="col">col
   class="col">col
   class="col">col

 class="row">
   class="col-8">col-8
   class="col-4">col-4

Sử dụng một tập hợp các lớp

 class="row">
   class="col">col
   class="col">col
   class="col">col
   class="col">col

 class="row">
   class="col-8">col-8
   class="col-4">col-4

 class="row">
   class="col">col
   class="col">col
   class="col">col
   class="col">col

 class="row">
   class="col-8">col-8
   class="col-4">col-4

Sử dụng một tập hợp các lớp

 class="row">
   class="col">col
   class="col">col
   class="col">col
   class="col">col

 class="row">
   class="col-8">col-8
   class="col-4">col-4

 class="row">
   class="col">col
   class="col">col
   class="col">col
   class="col">col

 class="row">
   class="col-8">col-8
   class="col-4">col-4

 class="row">
   class="col-12 col-md-8">.col-12 .col-md-8
   class="col-6 col-md-4">.col-6 .col-md-4



 class="row">
   class="col-6 col-md-4">.col-6 .col-md-4
   class="col-6 col-md-4">.col-6 .col-md-4
   class="col-6 col-md-4">.col-6 .col-md-4



 class="row">
   class="col-6">.col-6
   class="col-6">.col-6

Pha trộn và kết hợp

Donith muốn các cột của bạn chỉ đơn giản xếp chồng lên một số tầng lưới? Sử dụng kết hợp các lớp khác nhau cho mỗi tầng khi cần thiết. Xem ví dụ dưới đây để biết ý tưởng tốt hơn về cách tất cả hoạt động.

.col-12 .col-MD-8

.col-6 .col-MD-4

.col-6 .col-MD-4

.col-6 .col-MD-4

.col-6 .col-MD-4

.col-6 .col-MD-4

.col-6 .col-MD-4

.col-6 .col-MD-4

.col-6 .col-MD-4

.col-6 .col-MD-4

 class="container">
   class="row align-items-start">
     class="col">
      One of three columns
    
     class="col">
      One of three columns
    
     class="col">
      One of three columns
    
  
   class="row align-items-center">
     class="col">
      One of three columns
    
     class="col">
      One of three columns
    
     class="col">
      One of three columns
    
  
   class="row align-items-end">
     class="col">
      One of three columns
    
     class="col">
      One of three columns
    
     class="col">
      One of three columns
    
  

.col-6 .col-MD-4

.col-6 .col-MD-4

.col-6 .col-MD-4

 class="container">
   class="row">
     class="col">
      1 of 2
    
     class="col">
      2 of 2
    
  
   class="row">
     class="col">
      1 of 3
    
     class="col">
      2 of 3
    
     class="col">
      3 of 3
    
  

Liên kết

Sử dụng các tiện ích căn chỉnh Flexbox để sắp xếp các cột theo chiều dọc và chiều ngang.

Sử dụng các tiện ích căn chỉnh Flexbox để sắp xếp các cột theo chiều dọc và chiều ngang.

Sử dụng các tiện ích căn chỉnh Flexbox để sắp xếp các cột theo chiều dọc và chiều ngang.

Sử dụng các tiện ích căn chỉnh Flexbox để sắp xếp các cột theo chiều dọc và chiều ngang.

Sử dụng các tiện ích căn chỉnh Flexbox để sắp xếp các cột theo chiều dọc và chiều ngang.

Sử dụng các tiện ích căn chỉnh Flexbox để sắp xếp các cột theo chiều dọc và chiều ngang.

Sử dụng các tiện ích căn chỉnh Flexbox để sắp xếp các cột theo chiều dọc và chiều ngang.

Sử dụng các tiện ích căn chỉnh Flexbox để sắp xếp các cột theo chiều dọc và chiều ngang.

Sử dụng các tiện ích căn chỉnh Flexbox để sắp xếp các cột theo chiều dọc và chiều ngang.

Sử dụng các tiện ích căn chỉnh Flexbox để sắp xếp các cột theo chiều dọc và chiều ngang.

 class="container">
   class="row">
     class="col">
      1 of 2
    
     class="col">
      2 of 2
    
  
   class="row">
     class="col">
      1 of 3
    
     class="col">
      2 of 3
    
     class="col">
      3 of 3
    
  

Căn chỉnh dọc

Một trong ba cột

Liên kết ngang

Một trong hai cột Drop the parent

 class="container">
   class="row">
     class="col">Column
     class="col">Column
     class="w-100">
     class="col">Column
     class="col">Column
  

 class="container">
   class="row">
     class="col">
      1 of 3
    
     class="col-6">
      2 of 3 (wider)
    
     class="col">
      3 of 3
    
  
   class="row">
     class="col">
      1 of 3
    
     class="col-5">
      2 of 3 (wider)
    
     class="col">
      3 of 3
    
  

 class="container">
   class="row">
     class="col">
      1 of 2
    
     class="col">
      2 of 2
    
  
   class="row">
     class="col">
      1 of 3
    
     class="col">
      2 of 3
    
     class="col">
      3 of 3
    
  

Không có máng xối

Các máng xối 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

 class="container">
   class="row justify-content-md-center">
     class="col col-lg-2">
      1 of 3
    
     class="col-md-auto">
      Variable width content
    
     class="col col-lg-2">
      3 of 3
    
  
   class="row">
     class="col">
      1 of 3
    
     class="col-md-auto">
      Variable width content
    
     class="col col-lg-2">
      3 of 3
    
  

 class="container">
   class="row justify-content-md-center">
     class="col col-lg-2">
      1 of 3
    
     class="col-md-auto">
      Variable width content
    
     class="col col-lg-2">
      3 of 3
    
  
   class="row">
     class="col">
      1 of 3
    
     class="col-md-auto">
      Variable width content
    
     class="col col-lg-2">
      3 of 3
    
  

 class="container">
   class="row">
     class="col">
      1 of 3
    
     class="col-6">
      2 of 3 (wider)
    
     class="col">
      3 of 3
    
  
   class="row">
     class="col">
      1 of 3
    
     class="col-5">
      2 of 3 (wider)
    
     class="col">
      3 of 3
    
  

Sử dụng một tập hợp các lớp

 class="row">
   class="col">col
   class="col">col
   class="col">col
   class="col">col

 class="row">
   class="col-8">col-8
   class="col-4">col-4

 class="row">
   class="col">col
   class="col">col
   class="col">col
   class="col">col

 class="row">
   class="col-8">col-8
   class="col-4">col-4

 class="container">
   class="row">
     class="col">
      1 of 2
    
     class="col">
      2 of 2
    
  
   class="row">
     class="col">
      1 of 3
    
     class="col">
      2 of 3
    
     class="col">
      3 of 3
    
  

Pha trộn và kết hợp

Donith muốn các cột của bạn chỉ đơn giản xếp chồng lên một số tầng lưới? Sử dụng kết hợp các lớp khác nhau cho mỗi tầng khi cần thiết. Xem ví dụ dưới đây để biết ý tưởng tốt hơn về cách tất cả hoạt động.

.col-9

.col-12 .col-MD-8
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.

.col-6 .col-MD-4
Subsequent columns continue along the new line.

 class="container">
   class="row">
     class="col">
      1 of 2
    
     class="col">
      2 of 2
    
  
   class="row">
     class="col">
      1 of 3
    
     class="col">
      2 of 3
    
     class="col">
      3 of 3
    
  

Liên kết

Sử dụng các tiện ích căn chỉnh Flexbox để sắp xếp các cột theo chiều dọc và chiều ngang.

Căn chỉnh dọc

Căn chỉnh dọc

Căn chỉnh dọc

Căn chỉnh dọc

 class="container">
   class="row">
     class="col">
      1 of 2
    
     class="col">
      2 of 2
    
  
   class="row">
     class="col">
      1 of 3
    
     class="col">
      2 of 3
    
     class="col">
      3 of 3
    
  

Một trong ba cột

Liên kết ngang

Liên kết ngang

Liên kết ngang

Liên kết ngang

 class="container">
   class="row">
     class="col">
      1 of 2
    
     class="col">
      2 of 2
    
  
   class="row">
     class="col">
      1 of 3
    
     class="col">
      2 of 3
    
     class="col">
      3 of 3
    
  

Một trong hai cột

Không có máng xối

Các máng xối 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

 class="container">
   class="row justify-content-md-center">
     class="col col-lg-2">
      1 of 3
    
     class="col-md-auto">
      Variable width content
    
     class="col col-lg-2">
      3 of 3
    
  
   class="row">
     class="col">
      1 of 3
    
     class="col-md-auto">
      Variable width content
    
     class="col col-lg-2">
      3 of 3
    
  

 class="container">
   class="row justify-content-md-center">
     class="col col-lg-2">
      1 of 3
    
     class="col-md-auto">
      Variable width content
    
     class="col col-lg-2">
      3 of 3
    
  
   class="row">
     class="col">
      1 of 3
    
     class="col-md-auto">
      Variable width content
    
     class="col col-lg-2">
      3 of 3
    
  

 class="container">
   class="row">
     class="col">
      1 of 3
    
     class="col-6">
      2 of 3 (wider)
    
     class="col">
      3 of 3
    
  
   class="row">
     class="col">
      1 of 3
    
     class="col-5">
      2 of 3 (wider)
    
     class="col">
      3 of 3
    
  

 class="row">
   class="col-sm-8">col-sm-8
   class="col-sm-4">col-sm-4

 class="row">
   class="col-sm">col-sm
   class="col-sm">col-sm
   class="col-sm">col-sm

 class="row">
   class="col-sm-8">col-sm-8
   class="col-sm-4">col-sm-4

 class="row">
   class="col-sm">col-sm
   class="col-sm">col-sm
   class="col-sm">col-sm

 class="row">
   class="col-sm-8">col-sm-8
   class="col-sm-4">col-sm-4

 class="row">
   class="col-sm">col-sm
   class="col-sm">col-sm
   class="col-sm">col-sm

 class="row">
   class="col-12 col-md-8">.col-12 .col-md-8
   class="col-6 col-md-4">.col-6 .col-md-4



 class="row">
   class="col-6 col-md-4">.col-6 .col-md-4
   class="col-6 col-md-4">.col-6 .col-md-4
   class="col-6 col-md-4">.col-6 .col-md-4



 class="row">
   class="col-6">.col-6
   class="col-6">.col-6

Ở đây, mã nguồn để tạo các phong cách này. Lưu ý rằng các điểm ghi đè cột chỉ được phân chia đến các cột trẻ đầu tiên và được nhắm mục tiêu thông qua bộ chọn thuộc tính. Mặc dù điều này tạo ra một bộ chọn cụ thể hơn, phần đệm cột vẫn có thể được tùy chỉnh thêm với các tiện ích khoảng cách.

Cần một thiết kế cạnh từ cạnh? Thả cha mẹ

 class="container">
   class="row">
     class="col">Column
     class="col">Column
     class="w-100">
     class="col">Column
     class="col">Column
  

 class="container">
   class="row">
     class="col">
      1 of 3
    
     class="col-6">
      2 of 3 (wider)
    
     class="col">
      3 of 3
    
  
   class="row">
     class="col">
      1 of 3
    
     class="col-5">
      2 of 3 (wider)
    
     class="col">
      3 of 3
    
  

Trong thực tế, ở đây, nó trông như thế nào. Lưu ý 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, các tầng đáp ứng, sắp xếp lại, v.v.).

 class="container">
   class="row">
     class="col">
      1 of 2
    
     class="col">
      2 of 2
    
  
   class="row">
     class="col">
      1 of 3
    
     class="col">
      2 of 3
    
     class="col">
      3 of 3
    
  

.col-12 .col-SM-6 .col-MD-8

Bao bọc cột

Nếu hơn 12 cột được đặt trong một hàng, mỗi nhóm các cột bổ sung, như một đơn vị, sẽ quấn vào một dòng mới.

Trong thực tế, ở đây, nó trông như thế nào. Lưu ý 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, các tầng đáp ứng, sắp xếp lại, v.v.).

 class="container">
   class="row">
     class="col">
      1 of 2
    
     class="col">
      2 of 2
    
  
   class="row">
     class="col">
      1 of 3
    
     class="col">
      2 of 3
    
     class="col">
      3 of 3
    
  

.col-12 .col-SM-6 .col-MD-8

Bao bọc cột

Các lớp bù

Di chuyển các cột sang phải bằng các lớp

 class="row">
   class="col-12 col-md-8">.col-12 .col-md-8
   class="col-6 col-md-4">.col-6 .col-md-4



 class="row">
   class="col-6 col-md-4">.col-6 .col-md-4
   class="col-6 col-md-4">.col-6 .col-md-4
   class="col-6 col-md-4">.col-6 .col-md-4



 class="row">
   class="col-6">.col-6
   class="col-6">.col-6

 class="container">
   class="row align-items-start">
     class="col">
      One of three columns
    
     class="col">
      One of three columns
    
     class="col">
      One of three columns
    
  
   class="row align-items-center">
     class="col">
      One of three columns
    
     class="col">
      One of three columns
    
     class="col">
      One of three columns
    
  
   class="row align-items-end">
     class="col">
      One of three columns
    
     class="col">
      One of three columns
    
     class="col">
      One of three columns
    
  

 class="container">
   class="row align-items-start">
     class="col">
      One of three columns
    
     class="col">
      One of three columns
    
     class="col">
      One of three columns
    
  
   class="row align-items-center">
     class="col">
      One of three columns
    
     class="col">
      One of three columns
    
     class="col">
      One of three columns
    
  
   class="row align-items-end">
     class="col">
      One of three columns
    
     class="col">
      One of three columns
    
     class="col">
      One of three columns
    
  

 class="container">
   class="row align-items-start">
     class="col">
      One of three columns
    
     class="col">
      One of three columns
    
     class="col">
      One of three columns
    
  
   class="row align-items-center">
     class="col">
      One of three columns
    
     class="col">
      One of three columns
    
     class="col">
      One of three columns
    
  
   class="row align-items-end">
     class="col">
      One of three columns
    
     class="col">
      One of three columns
    
     class="col">
      One of three columns
    
  

.col-md-4

.Col-MD-4 .Offset-MD-4

.Col-MD-3 .Offset-MD-3

.Col-MD-3 .Offset-MD-3

 class="container">
   class="row">
     class="col">
      1 of 2
    
     class="col">
      2 of 2
    
  
   class="row">
     class="col">
      1 of 3
    
     class="col">
      2 of 3
    
     class="col">
      3 of 3
    
  

Ngoài việc xóa cột tại các điểm dừng đáp ứng, bạn có thể cần phải đặt lại độ lệch. Xem điều này trong hành động trong ví dụ lưới.

.col-SM-5 .Col-MD-6

.Col-SM-5 .Offset-SM-2 .Col-MD-6 .Offset-MD-0

.col-SM-6 .col-MD-5 .Col-LG-6

.Col-SM-6 .Col-MD-5 .Offset-MD-2 .Col-LG-6 .Offset-LG-0

 class="container">
   class="row">
     class="col">Column
     class="col">Column
     class="w-100">
     class="col">Column
     class="col">Column
  

Tiện ích ký quỹ

Với việc chuyển sang Flexbox trong V4, bạn có thể sử dụng các tiện ích ký quỹ như

 class="container">
   class="row align-items-start">
     class="col">
      One of three columns
    
     class="col">
      One of three columns
    
     class="col">
      One of three columns
    
  
   class="row align-items-center">
     class="col">
      One of three columns
    
     class="col">
      One of three columns
    
     class="col">
      One of three columns
    
  
   class="row align-items-end">
     class="col">
      One of three columns
    
     class="col">
      One of three columns
    
     class="col">
      One of three columns
    
  

.col-md-4

.Col-MD-4 .ML-Auto

.Col-MD-3 .ML-MD-Auto

.Col-MD-3 .ML-MD-Auto

.Col-Auto .Mr-Auto

.col-auto

 class="container">
   class="row">
     class="col">Column
     class="col">Column
     class="w-100">
     class="col">Column
     class="col">Column
  

Làm tổ

Để làm tổ nội dung của bạn bằng lưới mặc định, hãy thêm một cột

 class="container">
   class="row justify-content-md-center">
     class="col col-lg-2">
      1 of 3
    
     class="col-md-auto">
      Variable width content
    
     class="col col-lg-2">
      3 of 3
    
  
   class="row">
     class="col">
      1 of 3
    
     class="col-md-auto">
      Variable width content
    
     class="col col-lg-2">
      3 of 3
    
  

 class="row">
   class="col">col
   class="col">col
   class="col">col
   class="col">col

 class="row">
   class="col-8">col-8
   class="col-4">col-4

 class="row">
   class="col">col
   class="col">col
   class="col">col
   class="col">col

 class="row">
   class="col-8">col-8
   class="col-4">col-4

Cấp 1: .col-SM-9

Cấp 2: .Col-8 .Col-SM-6

Cấp 2: .Col-4 .Col-SM-6

 class="container">
   class="row">
     class="col">Column
     class="col">Column
     class="w-100">
     class="col">Column
     class="col">Column
  

Mixin sass

Khi sử dụng các tệp SASS nguồn Bootstrap, bạn có tùy chọn sử dụng các biến và mixin SASS để tạo bố cục trang tùy chỉnh, ngữ nghĩa và đáp ứng. Các lớp lưới được xác định trước của chúng tôi sử dụng các biến và mixin tương tự để cung cấp toàn bộ các lớp sẵn sàng sử dụng để bố trí nhanh chóng.

Biến

Các biến và bản đồ xác định số lượng cột, chiều rộng máng xối và điểm truy vấn phương tiện để bắt đầu các cột nổi. Chúng tôi sử dụng chúng để tạo ra các lớp lưới được xác định trước được ghi nhận ở trên, cũng như cho các bản mixin tùy chỉnh được liệt kê dưới đây.

 class="container">
   class="row">
     class="col">Column
     class="col">Column
     class="w-100">
     class="col">Column
     class="col">Column
  

Mixins

Mixin được sử dụng cùng với các biến lưới để tạo CSS ngữ nghĩa cho các cột lưới riêng lẻ.

 class="container">
   class="row">
     class="col">Column
     class="col">Column
     class="w-100">
     class="col">Column
     class="col">Column
  

Ví dụ sử dụng

Bạn có thể sửa đổi các biến thành các giá trị tùy chỉnh của riêng bạn hoặc chỉ sử dụng các mixin với các giá trị mặc định của chúng. Ở đây, một ví dụ về việc sử dụng các cài đặt mặc định để tạo bố cục hai cột với khoảng cách giữa.

 class="container">
   class="row">
     class="col">Column
     class="col">Column
     class="w-100">
     class="col">Column
     class="col">Column
  

Nội dung chính

Nội dung thứ cấp

 class="container">
   class="row">
     class="col">Column
     class="col">Column
     class="w-100">
     class="col">Column
     class="col">Column
  

Tùy chỉnh lưới

Sử dụng các biến và bản đồ SASS tích hợp của chúng tôi, nó có thể tùy chỉnh hoàn toàn các lớp lưới được xác định trước. Thay đổi số lượng các tầng, kích thước truy vấn phương tiện và chiều rộng của container, sau đó được biên dịch lại.

Cột và máng xối

Số lượng cột lưới có thể được sửa đổi thông qua các biến SASS.

 class="container">
   class="row align-items-start">
     class="col">
      One of three columns
    
     class="col">
      One of three columns
    
     class="col">
      One of three columns
    
  
   class="row align-items-center">
     class="col">
      One of three columns
    
     class="col">
      One of three columns
    
     class="col">
      One of three columns
    
  
   class="row align-items-end">
     class="col">
      One of three columns
    
     class="col">
      One of three columns
    
     class="col">
      One of three columns
    
  

 class="container">
   class="row align-items-start">
     class="col">
      One of three columns
    
     class="col">
      One of three columns
    
     class="col">
      One of three columns
    
  
   class="row align-items-center">
     class="col">
      One of three columns
    
     class="col">
      One of three columns
    
     class="col">
      One of three columns
    
  
   class="row align-items-end">
     class="col">
      One of three columns
    
     class="col">
      One of three columns
    
     class="col">
      One of three columns
    
  

 class="container">
   class="row align-items-start">
     class="col">
      One of three columns
    
     class="col">
      One of three columns
    
     class="col">
      One of three columns
    
  
   class="row align-items-center">
     class="col">
      One of three columns
    
     class="col">
      One of three columns
    
     class="col">
      One of three columns
    
  
   class="row align-items-end">
     class="col">
      One of three columns
    
     class="col">
      One of three columns
    
     class="col">
      One of three columns
    
  

 class="container">
   class="row">
     class="col">
      1 of 2
    
     class="col">
      2 of 2
    
  
   class="row">
     class="col">
      1 of 3
    
     class="col">
      2 of 3
    
     class="col">
      3 of 3
    
  

 class="container">
   class="row">
     class="col">Column
     class="col">Column
     class="w-100">
     class="col">Column
     class="col">Column
  

Lưới tầng

Di chuyển ra ngoài các cột, bạn cũng có thể tùy chỉnh số lượng các tầng lưới. Nếu bạn chỉ muốn bốn tầng lưới, bạn sẽ cập nhật

 class="container">
   class="row">
     class="col">
      1 of 2
    
     class="col">
      2 of 2
    
  
   class="row">
     class="col">
      1 of 3
    
     class="col">
      2 of 3
    
     class="col">
      3 of 3
    
  

 class="container">
   class="row">
     class="col">
      1 of 2
    
     class="col">
      2 of 2
    
  
   class="row">
     class="col">
      1 of 3
    
     class="col">
      2 of 3
    
     class="col">
      3 of 3
    
  

 class="container">
   class="row">
     class="col">Column
     class="col">Column
     class="w-100">
     class="col">Column
     class="col">Column
  

Khi thực hiện bất kỳ thay đổi nào đối với các biến SASS hoặc bản đồ, bạn sẽ cần lưu các thay đổi và biên dịch lại. Làm như vậy sẽ xuất ra một tập hợp các lớp lưới được xác định trước cho chiều rộng cột, độ lệch và đặt hàng. Tiện ích hiển thị đáp ứng cũng sẽ được cập nhật để sử dụng các điểm dừng tùy chỉnh. Đảm bảo đặt các giá trị lưới trong

 class="container">
   class="row justify-content-md-center">
     class="col col-lg-2">
      1 of 3
    
     class="col-md-auto">
      Variable width content
    
     class="col col-lg-2">
      3 of 3
    
  
   class="row">
     class="col">
      1 of 3
    
     class="col-md-auto">
      Variable width content
    
     class="col col-lg-2">
      3 of 3
    
  

 class="container">
   class="row justify-content-md-center">
     class="col col-lg-2">
      1 of 3
    
     class="col-md-auto">
      Variable width content
    
     class="col col-lg-2">
      3 of 3
    
  
   class="row">
     class="col">
      1 of 3
    
     class="col-md-auto">
      Variable width content
    
     class="col col-lg-2">
      3 of 3
    
  

 class="container">
   class="row justify-content-md-center">
     class="col col-lg-2">
      1 of 3
    
     class="col-md-auto">
      Variable width content
    
     class="col col-lg-2">
      3 of 3
    
  
   class="row">
     class="col">
      1 of 3
    
     class="col-md-auto">
      Variable width content
    
     class="col col-lg-2">
      3 of 3
    
  

 class="container">
   class="row">
     class="col">
      1 of 2
    
     class="col">
      2 of 2
    
  
   class="row">
     class="col">
      1 of 3
    
     class="col">
      2 of 3
    
     class="col">
      3 of 3