HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Ví dụ về Bootstrap 4 Grid

❮ Trước Kế tiếp ❯

Dưới đây chúng tôi đã thu thập một số ví dụ về bố cục lưới Bootstrap 4.

Ba cột bằng nhau

Sử dụng .collớp trên một số phần tử được chỉ định và Bootstrap sẽ nhận ra có bao nhiêu phần tử (và tạo các cột có chiều rộng bằng nhau). Trong ví dụ dưới đây, chúng tôi sử dụng ba phần tử col, có chiều rộng mỗi phần tử là 33,33%.

col
col
col

Thí dụ

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

Ba cột bằng nhau sử dụng số

Bạn cũng có thể sử dụng số để kiểm soát độ rộng của cột. Chỉ cần đảm bảo rằng tổng cộng tối đa 12 hoặc ít hơn (không bắt buộc bạn phải sử dụng tất cả 12 cột có sẵn):

col-4
col-4
col-4

Thí dụ

<div class="row">
  <div class="col-4">col-4</div>
  <div class="col-4">col-4</div>
  <div class="col-4">col-4</div>
</div>

Ba cột không bằng nhau

Để tạo các cột không bằng nhau, bạn phải sử dụng số. Ví dụ sau sẽ tạo phân tách 25% / 50% / 25%:

col-3
col-6
col-3

Thí dụ

<div class="row">
  <div class="col-3">col-3</div>
  <div class="col-6">col-6</div>
  <div class="col-3">col-3</div>
</div>

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

Tuy nhiên, chỉ đặt chiều rộng của một cột là đủ và để các cột anh em tự động thay đổi kích thước xung quanh nó. Ví dụ sau sẽ tạo phân tách 25% / 50% / 25%:

col
col-6
col

Thí dụ

<div class="row">
  <div class="col">col</div>
  <div class="col-6">col-6</div>
  <div class="col">col</div>
</div>

Nhiều cột bằng nhau hơn

1 của 2
2 của 2
1 trong 4
2 của 4
3 của 4
4 của 4
1 trong 6
2 trên 6
3 của 6
4 trên 6
5 trên 6
6 của 6

Thí dụ

<!-- Two equal columns -->
<div class="row">
  <div class="col">1 of 2</div>
  <div class="col">2 of 2</div>
</div>

<!-- Four equal columns -->
<div class="row">
  <div class="col">1 of 4</div>
  <div class="col">2 of 4</div>
  <div class="col">3 of 4</div>
  <div class="col">4 of 4</div>
</div>

<!-- Six equal columns -->
<div class="row">
  <div class="col">1 of 6</div>
  <div class="col">2 of 6</div>
  <div class="col">3 of 6</div>
  <div class="col">4 of 6</div>  
  <div class="col">5 of 6</div>
  <div class="col">6 of 6</div>
</div>

Hàng Cols

Bạn cũng có thể kiểm soát số lượng cột sẽ xuất hiện bên cạnh nhau (bất kể số cột), với các .row-cols-*lớp:

1 của 2
2 của 2
1 trong 4
2 của 4
3 của 4
4 của 4
1 trong 6
2 trên 6
3 của 6
4 trên 6
5 trên 6
6 của 6

Thí dụ

<div class="row row-cols-1">
  <div class="col">1 of 2</div>
  <div class="col">2 of 2</div>
</div>

<div class="row row-cols-2">
  <div class="col">1 of 4</div>
  <div class="col">2 of 4</div>
  <div class="col">3 of 4</div>
  <div class="col">4 of 4</div>
</div>

<div class="row row-cols-3">
  <div class="col">1 of 6</div>
  <div class="col">2 of 6</div>
  <div class="col">3 of 6</div>
  <div class="col">4 of 6</div>  
  <div class="col">5 of 6</div>
  <div class="col">6 of 6</div>
</div>

Nhiều cột không bằng nhau

1 của 2
2 của 2
1 trong 4
2 của 4
3 của 4
4 của 4
1 trong 4
2 của 4
3 của 4
4 của 4

Thí dụ

<!-- Two Unequal Columns -->
<div class="row">
  <div class="col-8">1 of 2</div>
  <div class="col-4">2 of 2</div>
</div>

<!-- Four Unequal Columns -->
<div class="row">
  <div class="col-2">1 of 4</div>
  <div class="col-2">2 of 4</div>
  <div class="col-2">3 of 4</div>
  <div class="col-6">4 of 4</div>
</div>

<!-- Setting two column widths -->
<div class="row">
  <div class="col-4">1 of 4</div>
  <div class="col-6">2 of 4</div>
  <div class="col">3 of 4</div>
  <div class="col">4 of 4</div>
</div>

Chiều cao bằng nhau

Nếu một trong các cột cao hơn cột kia (do chiều cao văn bản hoặc CSS), phần còn lại sẽ theo sau:

Nhieu vuot troi rat quan trong, khong co su khac biet trong nhung mon do choi tinh duc. Và nỗi đau mà tôi có thể nhận được vào cuối tuần đó. Không tệ khi iriure chọn nó, và zril flats hay thứ gì đó tương tự, đã trợ cấp cho một người trong chúng ta, những người đã xem bóng đá. Không có nỗi đau nào của chúng tôi bị tôi đọc, nó phải làm cho anh ấy trở nên nhầy nhụa Platon.
col
col

Thí dụ

<div class="row">
  <div class="col">Lorem ipsum...</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

Cột lồng nhau

col-8
col-6
col-6
col-4

Ví dụ sau đây cho thấy cách tạo bố cục hai cột, với hai cột khác bên trong một trong các cột:

Thí dụ

<div class="row">
  <div class="col-8">
    .col-8
    <div class="row">
      <div class="col-6">.col-6</div>
      <div class="col-6">.col-6</div>
    </div>
  </div>
  <div class="col-4">.col-4</div>
</div>

Các lớp đáp ứng

Hệ thống lưới Bootstrap 4 có năm lớp:

  • .col- (thiết bị cực nhỏ - chiều rộng màn hình nhỏ hơn 576px)
  • .col-sm- (thiết bị nhỏ - chiều rộng màn hình bằng hoặc lớn hơn 576px)
  • .col-md- (thiết bị trung bình - chiều rộng màn hình bằng hoặc lớn hơn 768px)
  • .col-lg- (thiết bị lớn - chiều rộng màn hình bằng hoặc lớn hơn 992px)
  • .col-xl- (thiết bị phóng to - chiều rộng màn hình bằng hoặc lớn hơn 1200px)

Các lớp trên có thể được kết hợp để tạo ra các bố cục năng động và linh hoạt hơn.

Mẹo: Mỗi lớp mở rộng quy mô, vì vậy nếu bạn muốn đặt cùng độ rộng cho smvà md, bạn chỉ cần chỉ định sm.

Xếp chồng lên nhau theo chiều ngang

col-sm-9
col-sm-3
col-sm
col-sm
col-sm

Ví dụ sau cho thấy cách tạo bố cục cột bắt đầu xếp chồng trên các thiết bị cực nhỏ, trước khi trở thành chiều ngang trên các thiết bị lớn hơn (sm, md, lg và xl):

Thí dụ

<div class="row">
  <div class="col-sm-9">col-sm-9</div>
  <div class="col-sm-3">col-sm-3</div>
</div>
<div class="row">
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
</div>

Trộn và kết hợp

col-6 col-sm-9
col-6 col-sm-3
col-7 col-lg-8
col-5 col-lg-4
col-sm-3 col-md-6 col-lg-4
col-sm-9 col-md-6 col-lg-8

Thí dụ

<!-- 50%/50% split on extra small devices and 75%/25% split on larger devices -->
<div class="row">
  <div class="col-6 col-sm-9">col-6 col-sm-9</div>
  <div class="col-6 col-sm-3">col-6 col-sm-3</div>
</div>

<!-- 58%/42% split on extra small, small and medium devices and 66.3%/33.3% split on large and xlarge devices -->
<div class="row">
  <div class="col-7 col-lg-8">col-7 col-lg-8</div>
  <div class="col-5 col-lg-4">col-5 col-lg-4</div>
</div>

<!-- 25%/75% split on small devices, a 50%/50% split on medium devices, and a 33%/66% split on large and xlarge devices. On extra small devices, it will automatically stack (100%) -->
<div class="row">
  <div class="col-sm-3 col-md-6 col-lg-4">col-sm-3 col-md-6 col-lg-4</div>
  <div class="col-sm-9 col-md-6 col-lg-8">col-sm-9 col-md-6 col-lg-8</div>
</div>

Không có máng xối

Thêm .no-gutterslớp vào vùng .rowchứa để loại bỏ máng xối (không gian thừa):

Bản thân nỗi đau là quan trọng, nhưng nỗi đau được tăng cường bởi quá trình tạo mỡ, nhưng tôi cho nó thời gian để cắt giảm nó để tôi làm một số công việc lớn và nỗi đau.
Vì mục đích tối thiểu, ai trong chúng ta nên thực hiện bất kỳ công việc nào ngoại trừ việc tận dụng những hậu quả từ việc đó.
Nhưng để bạn có thể hiểu rằng mọi lỗi lầm bẩm sinh đều là niềm vui của việc buộc tội và ca ngợi nỗi đau, tôi sẽ mở ra toàn bộ vấn đề, và sẽ giải thích chính những điều đã được nói bởi người phát minh ra sự thật và như nó là kiến ​​trúc sư của cuộc sống may mắn.

Thí dụ

<div class="row no-gutters">

❮ Trước Kế tiếp ❯