Source

Hệ thống lưới điện

Sử dụng lưới flexbox ưu tiên cho thiết bị di động mạnh mẽ của chúng tôi để tạo bố cục với mọi hình dạng và kích thước nhờ hệ thống mười hai cột, năm lớp đáp ứng mặc định, biến Sass và mixin, cùng hàng chục lớp được xác định trước.

Làm thế nào nó hoạt động

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à sắp xếp 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 chuyên sâu về cách lưới kết hợp với nhau.

Bạn mới sử dụng hay chưa quen với flexbox? Đọc hướng dẫn flexbox CSS Tricks này để biết thông tin cơ bản, thuật ngữ, hướng dẫn và đoạn mã.

Một trong ba cột

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

Ví dụ trên tạo ba cột có chiều rộng bằng nhau trên các thiết bị nhỏ, vừa, lớn và cực lớn bằng cách sử dụng các lớp lưới được xác định trước của chúng tôi. Các cột đó được căn giữa trong trang với cột chính .container.

Chia nhỏ nó ra, đây là cách nó hoạt động:

Vùng chứa cung cấp một phương tiện để căn giữa và đệm nội dung trang web của bạn theo chiều ngang. Sử dụng .containercho chiều rộng pixel đáp ứng hoặc .container-fluidcho width: 100%tất cả các kích thước cửa sổ xem và thiết bị.
Hàng là trình bao bọc cho các cột. Mỗi cột có chiều ngang padding(được gọi là máng xối) để kiểm soát không gian giữa chúng. Điều này paddingsau đó được chống lại trên các hàng có biên âm. Bằng cách này, tất cả nội dung trong các cột của bạn được căn chỉnh trực quan xuống phía bên trái.
Trong bố cục dạng lưới, nội dung phải được đặt trong các cột và chỉ các cột mới có thể là con ngay lập tức của các hàng.
Nhờ flexbox, các cột lưới không có chỉ định widthsẽ tự động được bố trí dưới dạng các cột có chiều rộng bằng nhau. Ví dụ: bốn phiên bản của .col-smsẽ tự động có chiều rộng 25% từ điểm ngắt nhỏ trở lên. Xem phần cột bố cục tự động để biết thêm ví dụ.
Các lớp cột cho biết số cột bạn muốn sử dụng trong số 12 cột có thể có trên mỗi hàng. Vì vậy, nếu bạn muốn ba cột có chiều rộng bằng nhau, bạn có thể sử dụng .col-4.
Các cột widths được đặt theo tỷ lệ phần trăm, vì vậy chúng luôn linh hoạt và có kích thước tương ứng với phần tử mẹ của chúng.
Các cột có chiều ngang paddingđể tạo rãnh giữa các cột riêng lẻ, tuy nhiên, bạn có thể xóa marginkhỏi các hàng và paddingkhỏi các cột có .no-gutterstrên .row.
Để làm cho lưới đáp ứng, có năm điểm ngắt lưới, một điểm cho mỗi điểm ngắt đáp ứng : tất cả các điểm ngắt (cực nhỏ), nhỏ, vừa, lớn và cực lớn.
Điểm ngắt lưới dựa trên các truy vấn phương tiện có chiều rộng tối thiểu, có nghĩa là chúng áp dụng cho một điểm ngắt đó và tất cả những điểm phía trên nó (ví dụ: .col-sm-4áp dụng cho các thiết bị nhỏ, vừa, lớn và cực lớn, nhưng không áp dụng cho xsđiểm ngắt đầu tiên).
Bạn có thể sử dụng các lớp lưới được xác định trước (như .col-4) hoặc hỗn hợp Sass để đánh dấu ngữ nghĩa hơn.

Hãy lưu ý những hạn chế và lỗi xung quanh flexbox , chẳng hạn như không thể sử dụng một số phần tử HTML làm vùng chứa flex .

Tùy chọn lưới

Trong khi Bootstrap sử dụng ems hoặc rems để xác định hầu hết các kích thước, pxs được sử dụng cho các điểm ngắt lưới và chiều rộng vùng chứa. Điều này là do chiều rộng khung nhìn tính bằng pixel và không thay đổi theo kích thước phông chữ .

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

	Cực nhỏ <576px	Nhỏ ≥576px	Trung bình ≥768px	Lớn ≥992px	Cực lớn ≥1200px
Chiều rộng vùng chứa tối đa	Không có (tự động)	540px	720px	960px	1140px
Tiền tố lớp	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# cột	12
Chiều rộng máng xối	30px (15px trên mỗi bên của cột)
Có thể lồng vào nhau	Đúng
Thứ tự cột	Đúng

Các cột bố cục tự động

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

Chiều rộng bằng nhau

Ví dụ: đây là hai bố cục lưới áp dụng cho mọi thiết bị và chế độ xem, từ xsđến xl. Thêm bất kỳ số lượng lớp nào ít hơn đơn vị cho mỗi điểm ngắt bạn cần và mọi cột sẽ có cùng chiều rộng.

1 của 2

2 của 2

1 trong 3

2 của 3

3 của 3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

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 flexbox của Safari đã ngăn điều này hoạt động mà không có dấu flex-basishoặc rõ ràng border. Có những giải pháp thay thế cho các phiên bản trình duyệt cũ hơn, nhưng chúng không cần thiết nếu bạn đã cập nhật.

Cột

<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="w-100"></div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

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

Tự động bố trí 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 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ư được hiển thị bên dưới), kết 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.

1 trong 3

2 của 3 (rộng hơn)

3 của 3

1 trong 3

2 của 3 (rộng hơn)

3 của 3

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

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

Sử dụng col-{breakpoint}-autocác lớp để định kích thước các cột dựa trên chiều rộng tự nhiên của nội dung của chúng.

1 trong 3

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

3 của 3

1 trong 3

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

3 của 3

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

Nhiều hàng có chiều rộng 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 vào .w-100vị trí bạn muốn các cột ngắt thành một dòng mới. Làm cho thời gian nghỉ trở nên nhạy bén bằng cách kết hợp .w-100với một số tiện ích hiển thị đáp ứng .

col

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="w-100"></div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

Các lớp học phản hồi

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

Tất cả các điểm ngắt

Đối với các lưới giống nhau từ thiết bị nhỏ nhất đến lớn nhất, hãy sử dụng các lớp .colvà .col-*. Chỉ định một lớp được đánh số khi bạn cần một cột có kích thước đặc biệt; nếu không, hãy thoải mái gắn bó .col.

col

col-8

col-4

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

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

Sử dụng một tập hợp các .col-sm-*lớp, bạn có thể tạo một hệ thống lưới cơ bản bắt đầu xếp chồng lên nhau trước khi trở thành ngang với điểm ngắt nhỏ ( sm).

col-sm-8

col-sm-4

col-sm

<div class="row">
  <div class="col-sm-8">col-sm-8</div>
  <div class="col-sm-4">col-sm-4</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>

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

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

.col-12 .col-md-8

.col-6 .col-md-4

.col-6

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-12 col-md-8">.col-12 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-6">.col-6</div>
  <div class="col-6">.col-6</div>
</div>

Căn chỉnh

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

Căn chỉnh theo chiều dọc

Một trong ba cột

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

Một trong ba cột

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

Căn chỉnh theo chiều ngang

Một trong hai cột

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

Không có máng xối

Các rãnh 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 .no-gutters. Điều này loại bỏ các âm margins từ .rowvà ngang paddingkhỏi tất cả các cột con ngay lập tức.

Đây là mã nguồn để tạo các kiểu này. Lưu ý rằng ghi đè cột chỉ được áp dụng cho các cột con đầu tiên và được nhắm mục tiêu thông qua bộ chọn thuộc tính . Trong khi đ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 giãn cách .

Cần một thiết kế tối tân? Bỏ cha mẹ .containerhoặc .container-fluid.

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

Trong thực tế, đây là cách nó trông. Lưu ý rằng 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, lớp đáp ứng, sắp xếp lại và hơn thế nữa).

.col-12 .col-sm-6 .col-md-8

.col-6 .col-md-4

<div class="row no-gutters">
  <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

Gói cột

Nếu có nhiều hơn 12 cột được đặt trong một hàng, thì mỗi nhóm cột phụ, như một đơn vị, sẽ nằm trên một dòng mới.

.col-9

.col-4
Vì 9 + 4 = 13> 12, div rộng 4 cột này được bao bọc trên một dòng mới dưới dạng một đơn vị liền kề.

.col-6
Các cột tiếp theo tiếp tục dọc theo dòng mới.

<div class="row">
  <div class="col-9">.col-9</div>
  <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>

Ngắt cột

Việc ngắt các cột thành một dòng mới trong flexbox yêu cầu một thủ thuật nhỏ: thêm một phần tử vào bất kỳ vị trí width: 100%nào bạn muốn để chuyển các cột của mình thành một dòng mới. Thông thường điều này được thực hiện với nhiều .rows, nhưng không phải mọi phương pháp triển khai đều có thể giải thích được điều này.

.col-6 .col-sm-3

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

  <!-- Force next columns to break to new line -->
  <div class="w-100"></div>

  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>

Bạn cũng có thể áp dụng ngắt này tại các điểm ngắt cụ thể bằng các tiện ích hiển thị đáp ứng của chúng tôi .

.col-6 .col-sm-4

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

  <!-- Force next columns to break to new line at md breakpoint and up -->
  <div class="w-100 d-none d-md-block"></div>

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

Sắp xếp lại

Đặt hàng các lớp học

Sử dụng .order-các lớp để kiểm soát thứ tự trực quan của nội dung của bạn. Các lớp này là đáp ứng, vì vậy bạn có thể đặt ordertheo điểm ngắt (ví dụ .order-1.order-md-2:). Bao gồm hỗ trợ 1thông 12qua tất cả năm cấp lưới.

Đầu tiên, nhưng không có thứ tự

Thứ hai, nhưng cuối cùng

Thứ ba, nhưng đầu tiên

<div class="container">
  <div class="row">
    <div class="col">
      First, but unordered
    </div>
    <div class="col order-12">
      Second, but last
    </div>
    <div class="col order-1">
      Third, but first
    </div>
  </div>
</div>

Ngoài ra còn có các lớp đáp ứng .order-firstvà thay đổi thành phần của một phần tử bằng cách áp dụng và ( ), tương ứng. Các lớp này cũng có thể được trộn lẫn với các lớp được đánh số khi cần thiết..order-lastorderorder: -1order: 13order: $columns + 1.order-*

Đầu tiên, nhưng cuối cùng

Thứ hai, nhưng không có thứ tự

Thứ ba, nhưng đầu tiên

<div class="container">
  <div class="row">
    <div class="col order-last">
      First, but last
    </div>
    <div class="col">
      Second, but unordered
    </div>
    <div class="col order-first">
      Third, but first
    </div>
  </div>
</div>

Các cột bù trừ

Bạn có thể bù trừ các cột lưới theo hai cách: .offset-các lớp lưới đáp ứng của chúng tôi và các tiện ích ký quỹ của chúng tôi . Các lớp lưới có kích thước phù hợp với các cột trong khi lề hữu ích hơn cho các bố cục nhanh trong đó chiều rộng của phần bù có thể thay đổi.

Các lớp bù đắp

Di chuyển các cột sang bên phải bằng cách sử dụng .offset-md-*các lớp. Các lớp này tăng lề trái của một cột theo *các cột. Ví dụ: .offset-md-4di chuyển .col-md-4qua bốn cột.

.col-md-4

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

.col-md-3 .offset-md-3

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

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
  <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>

Ngoài việc xóa cột tại các điểm ngắt đáp ứng, bạn có thể cần đặt lại các hiệu ứng. Xem điều này hoạt độ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

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>

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 lề như .mr-autođể buộc các cột anh em xa nhau.

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-md-auto

.col-auto .mr-auto

.col-auto

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
  <div class="col-auto mr-auto">.col-auto .mr-auto</div>
  <div class="col-auto">.col-auto</div>
</div>

Làm tổ

Để lồng nội dung của bạn với lưới mặc định, hãy thêm một .rowtập hợp các .col-sm-*cột mới trong một .col-sm-*cột hiện có. Các hàng lồng nhau phải bao gồm một tập hợp các cột có 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).

Cấp độ 1: .col-sm-9

Cấp độ 2: .col-8 .col-sm-6

Cấp độ 2: .col-4 .col-sm-6

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-8 col-sm-6">
        Level 2: .col-8 .col-sm-6
      </div>
      <div class="col-4 col-sm-6">
        Level 2: .col-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

Hỗn hợp sass

Khi sử dụng các tệp Sass nguồn của Bootstrap, bạn có tùy chọn sử dụng các biến Sass và mixin để 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à hỗn hợp tương tự này để cung cấp toàn bộ các lớp sẵn sàng sử dụng cho các bố cục đáp ứng nhanh.

Biến

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

$grid-columns:      12;
$grid-gutter-width: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
);

Mixin

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ẻ.

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

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 mình hoặc chỉ sử dụng các mixin với các giá trị mặc định của chúng. Dưới đây là một ví dụ về việc sử dụng cài đặt mặc định để tạo bố cục hai cột có khoảng cách giữa.

.example-container {
  width: 800px;
  @include make-container();
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

Nội dung chính

Nội dung phụ

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

Tùy chỉnh lưới

Sử dụng các biến và bản đồ Sass lưới tích hợp của chúng tôi, bạn hoàn toàn có thể tùy chỉnh các lớp lưới được xác định trước. Thay đổi số lượng lớp, kích thước truy vấn phương tiện và chiều rộng vùng chứa — sau đó 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. $grid-columnsđược sử dụng để tạo chiều rộng (tính bằng phần trăm) của từng cột riêng lẻ trong khi $grid-gutter-widthcho phép chiều rộng cụ thể của điểm ngắt được chia đều trên padding-leftvà padding-rightcho máng xối cột.

$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;

Các cấp lưới

Vượt 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 nên cập nhật $grid-breakpointsvà $container-max-widthsthành một cái gì đó như sau:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

Khi thực hiện bất kỳ thay đổi nào đối với các biến hoặc bản đồ của Sass, bạn sẽ cần lưu các thay đổi của mình 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 hoàn toàn mới cho độ rộng cột, hiệu số và thứ tự. Các tiện ích hiển thị đáp ứng cũng sẽ được cập nhật để sử dụng các điểm ngắt tùy chỉnh. Đảm bảo đặt các giá trị lưới trong px(not rem, emhoặc %).