in English

Cột

Tìm hiểu cách sửa đổi các cột với một số tùy chọn để căn chỉnh, sắp xếp thứ tự và bù trừ nhờ hệ thống lưới flexbox của chúng tôi. Ngoài ra, hãy xem cách sử dụng các lớp cột để quản lý chiều rộng của các phần tử không phải lưới.

Trên trang này

Đứng lên! Hãy nhớ đọc trang Lưới trước khi đi sâu vào cách sửa đổi và tùy chỉnh các cột lưới của bạn.

Cách chúng hoạt động

Các cột xây dựng trên kiến trúc flexbox của lưới. Flexbox có nghĩa là chúng ta có các tùy chọn để thay đổi các cột riêng lẻ và sửa đổi các nhóm cột ở cấp độ hàng . Bạn chọn cách các cột phát triển, thu nhỏ hoặc thay đổi theo cách khác.
Khi xây dựng bố cục lưới, tất cả nội dung sẽ ở dạng cột. Hệ thống phân cấp của lưới Bootstrap đi từ vùng chứa đến hàng này sang cột khác đến nội dung của bạn. Trong những trường hợp hiếm hoi, bạn có thể kết hợp nội dung và cột, nhưng hãy lưu ý rằng có thể có những hậu quả không mong muốn.
Bootstrap bao gồm các lớp được xác định trước để tạo bố cục nhanh, đáp ứng. Với sáu điểm ngắt và hàng chục cột ở mỗi tầng lưới, chúng tôi có hàng chục lớp đã được tạo sẵn để bạn tạo bố cục mong muốn của mình. Điều này có thể được tắt thông qua Sass nếu bạn muốn.

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

html

<div class="container text-center">
  <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

html

<div class="container text-center">
  <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

html

<div class="container text-center">
  <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 class="row justify-content-evenly">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </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.

html

<div class="container">
  <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>
</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

html

<div class="container text-center">
  <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>
</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

html

<div class="container text-center">
  <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>
</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 5qua tất cả sáu cấp lưới.

Đầu tiên trong DOM, không có đơn đặt hàng nào được áp dụng

Đứng thứ hai trong DOM, với đơn đặt hàng lớn hơn

Thứ ba trong DOM, với thứ tự là 1

html

<div class="container text-center">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-5">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </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: 6.order-*

Đầu tiên trong DOM, đặt hàng cuối cùng

Thứ hai trong DOM, không có thứ tự

Thứ ba trong DOM, được đặt hàng đầu tiên

html

<div class="container text-center">
  <div class="row">
    <div class="col order-last">
      First in DOM, ordered last
    </div>
    <div class="col">
      Second in DOM, unordered
    </div>
    <div class="col order-first">
      Third in DOM, ordered 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

html

<div class="container text-center">
  <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>
</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

html

<div class="container text-center">
  <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>
</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ư .me-autođể buộc các cột anh em xa nhau.

.col-md-4

.col-md-4 .ms-auto

.col-md-3 .ms-md-auto

.col-auto .me-auto

.col-auto

html

<div class="container text-center">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
    <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto me-auto">.col-auto .me-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

Các lớp cột độc lập

Các .col-*lớp cũng có thể được sử dụng bên ngoài a .rowđể cung cấp cho một phần tử một chiều rộng cụ thể. Bất cứ khi nào các lớp cột được sử dụng làm phần con không trực tiếp của một hàng, phần đệm sẽ bị bỏ qua.

.col-3: chiều rộng 25%

.col-sm-9: chiều rộng 75% trên điểm ngắt sm

html

<div class="col-3 bg-light p-3 border">
  .col-3: width of 25%
</div>
<div class="col-sm-9 bg-light p-3 border">
  .col-sm-9: width of 75% above sm breakpoint
</div>

Các lớp có thể được sử dụng cùng với các tiện ích để tạo các hình ảnh nổi đáp ứng. Đảm bảo bọc nội dung trong một .clearfixtrình bao bọc để xóa phần nổi nếu văn bản ngắn hơn.

Một đoạn văn bản giữ chỗ. Chúng tôi đang sử dụng nó ở đây để hiển thị việc sử dụng lớp clearfix. Chúng tôi đang thêm một số cụm từ vô nghĩa ở đây để chứng minh cách các cột tương tác ở đây với hình ảnh nổi.

Như bạn có thể thấy các đoạn văn được quấn quanh hình ảnh nổi một cách duyên dáng. Bây giờ hãy tưởng tượng điều này sẽ trông như thế nào với một số nội dung thực tế ở đây, thay vì chỉ là văn bản giữ chỗ nhàm chán lặp đi lặp lại, nhưng thực sự không truyền tải thông tin hữu hình nào. Nó chỉ đơn giản là chiếm dung lượng và thực sự không nên đọc.

Tuy nhiên, bạn đây, vẫn đang kiên trì đọc văn bản giữ chỗ này, hy vọng có thêm một số thông tin chi tiết, hoặc một số nội dung ẩn chứa trong trứng phục sinh. Một trò đùa, có lẽ. Thật không may, không có điều đó ở đây.

html

<div class="clearfix">
  <img src="..." class="col-md-6 float-md-end mb-3 ms-md-3" alt="...">

  <p>
    A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.
  </p>

  <p>
    As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read.
  </p>

  <p>
    And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here.
  </p>
</div>