Lớp siêu nhỏ (col-xs) áp dụng lớp cột lưới cho phần tử khi màn hình hẹp hơn 576px

Nếu bạn muốn áp dụng một lớp cực nhỏ trong Bootstrap 4, một điều quan trọng cần biết là col-xs-* bị loại bỏ trong Bootstrap4. Thay vào đó, bạn cần sử dụng col-*

Hệ thống lưới trong Bootstrap giúp bạn canh lề văn bản và sử dụng hàng loạt vùng chứa, hàng và cột. Hệ thống Lưới trong Bootstrap sử dụng ems và rems để xác định hầu hết các kích thước trong khi px được sử dụng cho các điểm ngắt lưới và độ rộng vùng chứa. Bootstrap Grid System cho phép tối đa 12 cột trên trang. Bạn có thể sử dụng từng cái riêng lẻ hoặc hợp nhất chúng lại với nhau để có các cột rộng hơn. Bạn có thể sử dụng tất cả các kết hợp giá trị có tổng bằng 12. Bạn có thể sử dụng 12 cột, mỗi cột có chiều rộng 1 hoặc sử dụng 4 cột, mỗi cột có chiều rộng 3 hoặc bất kỳ kết hợp nào khác

Chủ yếu có năm lớp trong hệ thống lưới được liệt kê dưới đây

• col- Cực nhỏ ( < 576 px )
• col-sm- Nhỏ ( >= 576 px )
• col-md- Trung bình ( >= 768 px )
• col-lg- Lớn ( >= 992 px )
• col-xl- Cực lớn ( >= 1200 px )

Bootstrap cung cấp 12 cột trên mỗi hàng được tạo sẵn trong lớp Cột. Vì vậy, bạn có thể kiểm soát độ rộng của cột bằng cách chỉ định các số trong. col-*, trong đó * có nghĩa là chiều rộng của cột bằng số

col-md-4. Lớp này được sử dụng khi kích thước thiết bị ở mức trung bình hoặc lớn hơn 768px và chiều rộng tối đa của vùng chứa là 720px và bạn muốn chiều rộng bằng 4 cột

col-xs-1. Lớp này được sử dụng khi kích thước thiết bị cực nhỏ (di động) và khi bạn muốn chiều rộng bằng 1 cột

col-lg-2. Lớp này được sử dụng khi kích thước thiết bị lớn hoặc lớn hơn 992px và chiều rộng tối đa của vùng chứa là 960px và khi bạn muốn kích thước bằng 2 cột

vùng chứa (100% chiều rộng dưới 540px)

container-sm (100% chiều rộng bên dưới 540px)

container-md (100% chiều rộng bên dưới 720px)

container-lg (100% chiều rộng bên dưới 960px)

container-xl (100% chiều rộng bên dưới 1140px)

container-xxl (100% chiều rộng bên dưới 1320px)

container-fluid (luôn có chiều rộng 100%)

Trong thời gian gần đây, tôi nhận thấy một điều phổ biến là các nhà phát triển bootstrap mới bắt đầu và những người chưa sử dụng bootstrap trong một thời gian khá lâu gặp khó khăn trong việc xác định độ rộng cột cho thiết bị di động

Hầu hết trong số họ đã sử dụng lớp col-xs-* nhưng nó không hiệu quả với họ

Ví dụ

 

  
Bootstrap Columns
  

   

    
Div1 content
   
   

    
Div2 content
   
   

    
Div3 content
   
   

    
Div4 content
   
  
 

Từ đoạn mã trên, nhà phát triển mong muốn có

4 cột có chiều rộng bằng nhau trong máy tính xách tay như trong ảnh chụp màn hình bên dưới

3 cột có chiều rộng bằng nhau trên màn hình máy tính bảng

Và cuối cùng là 2 cột có chiều rộng bằng nhau trong smartphone như hình bên dưới

Nhưng sử dụng mã trên, đó không phải là trường hợp trong điện thoại thông minh. Bạn sẽ nhận được các div có chiều rộng đầy đủ thay vì hai như trong hình bên dưới

Cách khắc phục cho đoạn mã trên sẽ là thay đổi phiên bản của col-xs-* thành col-* trong đó * là một chữ số từ 1 đến 12. Trong ví dụ của chúng tôi, bạn chỉ cần thay đổi col-xs-6 thành

First div
Second div
Third div

Nhưng để hiểu rõ hơn về giải pháp, tốt hơn hết bạn nên tìm hiểu thêm về các cột bootstrap

Hãy đi sâu hơn vào hệ thống lưới Bootstrap và cách nó phát triển và thay đổi theo thời gian, để xác định nguyên nhân cốt lõi của vấn đề

Hệ thống lưới Bootstrap

Bootstrap sử dụng hệ thống lưới được xây dựng với flexbox cho phép tối đa 12 cột trên trang

Hệ thống này phản hồi nhanh, với các cột tự động sắp xếp lại và thay đổi kích thước tùy thuộc vào kích thước màn hình thiết bị

Chiều rộng của cột phụ thuộc vào chiều rộng màn hình hoặc chiều rộng của phần tử cha. Đó là 1/12 chiều rộng màn hình hoặc của phần tử cha, ví dụ: div

Một số cột có thể được nhóm lại với nhau thành một cột rộng hơn. Một cột bao gồm 12 cột sẽ bao phủ toàn bộ chiều rộng của màn hình thiết bị hoặc của phần tử chứa

Các cột này được xác định bằng các thuộc tính HTML

First div
Second div
Third div

Trong những năm qua, Bootstrap đã phát triển thông qua một loạt các bản cập nhật và phiên bản dẫn đến những thay đổi mới trong hệ thống lưới của nó. Hãy xem các cột hệ thống lưới cho phiên bản 3, 4 và 5

Bootstrap 3 lớp lưới

Dưới đây là 3 lớp bootstrap để xác định độ rộng của các cột

ClassDescriptioncol-xs-*Đối với chiều rộng màn hình nhỏ hơn 768px (điện thoại)col-sm-*Đối với chiều rộng màn hình bằng hoặc lớn hơn 768px (máy tính bảng)col-md-*Đối với chiều rộng màn hình bằng hoặc lớn hơn 992px chiều rộng col-lg-*

Trong bootstrap 3, để xác định chiều rộng của một phần tử (ví dụ:. a div) về số lượng cột, bạn thêm một lớp vào nó với định dạng

First div
Second div
Third div

First div
Second div
Third div

First div
Second div
Third div

Các div này cần phải ở bên trong một div khác với lớp "hàng"

First div
Second div
Third div

Vậy ví dụ bạn muốn tạo 3 cột có chiều rộng bằng nhau để bao hết chiều rộng của hàng thì bạn làm như bên dưới

First div
Second div
Third div

Đoạn mã trên sẽ tạo 3 cột có chiều rộng bằng nhau bắt đầu từ máy tính xách tay nhỏ và mở rộng sang máy tính để bàn lớn. Trên máy tính bảng và các thiết bị nhỏ hơn, các cột sẽ tự động xếp chồng lên nhau

Như trong ví dụ đầu tiên của chúng tôi ở trên cùng, bạn cũng có thể thêm nhiều lớp vào div nếu bạn muốn các cột trải dài khác nhau trên các kích thước màn hình khác nhau. Ví dụ, giả sử bạn muốn có 4 cột trên máy tính xách tay nhưng 3 cột trên máy tính bảng, v.v.

Bootstrap 4 lớp lưới

Trong bootstrap 4, một số thay đổi đã được thực hiện đối với các lớp hệ thống lưới

• Lớp col-xs-* đã bị xóa và thay thế bằng lớp col-*

• 
  First div
  Second div
  Third div
  
  

  4 đã được giới thiệu
• Các điểm dừng cho các lớp đã được thay đổi

ClassDescriptioncol-*Thiết bị cực nhỏ có chiều rộng màn hình nhỏ hơn 576pxcol-sm-*Thiết bị nhỏ có chiều rộng màn hình bằng hoặc lớn hơn 576pxcol-md-*Thiết bị trung bình có chiều rộng màn hình bằng hoặc lớn hơn 768pxcol-lg-*Thiết bị lớn có màn hình

Bootstrap 5 lớp lưới

Nhiều thay đổi hơn đã được thực hiện đối với các lớp hệ thống lưới trong bootstrap 5, với việc giới thiệu

First div
Second div
Third div

ClassDescriptioncol-*Thiết bị cực nhỏ có chiều rộng màn hình nhỏ hơn 576pxcol-sm-*Thiết bị nhỏ có chiều rộng màn hình bằng hoặc lớn hơn 576pxcol-md-*Thiết bị trung bình có chiều rộng màn hình bằng hoặc lớn hơn 768pxcol-lg-*Thiết bị lớn có màn hình

Nguyên nhân cốt lõi của vấn đề với col-xs-* & giải pháp

Trong mã ví dụ của chúng tôi ở đầu trang, col-xs-* không hoạt động như mong đợi. Nguyên nhân là do xung đột phiên bản. Chúng tôi đang sử dụng bootstrap phiên bản 5, lớp đó không được hỗ trợ

Nếu chúng tôi sử dụng chính xác cùng một mã trên Bootstrap 3, nó sẽ hoạt động hoàn toàn tốt mà không gặp vấn đề gì

Bắt đầu từ Bootstrap 4, lớp col-xs-* đã bị xóa và thay thế bằng lớp col-*. Đối với Bootstrap phiên bản 4 trở lên, bạn phải luôn sử dụng col-* để xác định các cột trong các thiết bị cực nhỏ (điện thoại di động).
Đối với bootstrap 3 trở về trước, luôn sử dụng col-xs-*.

Giải pháp là thay đổi lớp hoặc thay đổi phiên bản bootstrap cho dự án trang web của bạn, tùy theo cách nào hoạt động tốt nhất trong trường hợp của bạn

Trong trường hợp bạn đang thắc mắc trang web của mình được xây dựng trên phiên bản nào, đây là bài viết tôi đã viết về cách kiểm tra phiên bản bootstrap mà trang web của bạn đang sử dụng

Col Xs trong Bootstrap là gì?

COL Xs nghĩa là gì?

Col có nghĩa là gì?

Làm cách nào để tạo 5 cột trong Bootstrap 4?