Làm cách nào để đặt phần bù còn lại trong Bootstrap?

Bạn có thể đang sử dụng lớp bootstrap

 Div 1
Div 2 
 Div 3

7 để đẩy một số cột div sang bên phải nhưng điều đó dường như không hiệu quả với bạn. Trong bài viết này, tôi sẽ giải thích tại sao điều này lại xảy ra và cách bạn có thể khắc phục nó một cách dễ dàng và nhanh chóng

Nhưng trước đó, tôi muốn đưa bạn qua hệ thống lưới bootstrap, cách thức hoạt động của nó và cách hoạt động của phần bù. Vui lòng cuộn xuống giải pháp nếu bạn đã hiểu cách thức hoạt động của 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 lưới phản hồi nhanh và các cột tự động sắp xếp lại tùy thuộc vào kích thước màn hình

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

Bạn có thể nhóm nhiều cột 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 thuộc tính HTML

 Div 1
Div 2 
 Div 3

8

Bootstrap 3 lớp lưới

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

ClassDescriptioncol-xsCho màn hình có chiều rộng nhỏ hơn 768px [điện thoại]col-smCho màn hình có chiều rộng bằng hoặc lớn hơn 768px [máy tính bảng]col-mdCho màn hình có chiều rộng bằng hoặc lớn hơn 992px [máy tính xách tay nhỏ]col-lgCho màn hình bằng hoặc lớn hơn 1200px

Trong bootstrap 3, để xác định chiều rộng [số cột] cho một phần tử, ví dụ div, bạn thêm một lớp vào nó, lấy định dạng

 Div 1
Div 2 
 Div 3

9. Đầu tiên * lấy lớp chiều rộng thiết bị, ví dụ:

 Div content

0,

 Div content

1, v.v. Dấu * cuối cùng lấy số lượng cột, vd. từ 1 đến 12

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

 Div content

0. Những con số trong. col-*-* phải luôn thêm tối đa 12 cho mỗi hàng

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

 Div 1
Div 2 
 Div 3

Đ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

Trong những năm qua, khung Bootstrap đã trải qua một loạt các bản cập nhật và các lớp này có thể khác nhau tùy thuộc vào phiên bản bootstrap [tại thời điểm viết bài này, Bootstrap 5 là phiên bản mới nhất] mà bạn đang sử dụng

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

  
   Div content
  
  

  1 đã bị xóa và thay thế bằng lớp

  
   Div content
  
  

  2

• 
   Div content
  
  

  3 đã đượ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-smThiết bị nhỏ có chiều rộng màn hình bằng hoặc lớn hơn 576pxcol-mdThiết bị trung bình có chiều rộng màn hình bằng hoặc lớn hơn 768pxcol-lgThiết bị lớn có chiều rộng màn hình bằng hoặc lớn hơn 992pxcol-xlExtra-

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

 Div content

4 cho các thiết bị xxlarge

ClassDescriptioncol-Thiết bị cực nhỏ có chiều rộng màn hình nhỏ hơn 576pxcol-smThiết bị nhỏ có chiều rộng màn hình bằng hoặc lớn hơn 576pxcol-mdThiết bị trung bình có chiều rộng màn hình bằng hoặc lớn hơn 768pxcol-lgThiết bị lớn có chiều rộng màn hình bằng hoặc lớn hơn 992pxcol-xlExtra-

Bất kể phiên bản bootstrap nào, bạn xác định chiều rộng của cột theo cùng một cách. Chỉ cần có một div với

 Div content

5 và bên trong nó thêm div cột của bạn. Trong mỗi div, hãy thêm một lớp

 Div 1
Div 2 
 Div 3

9 trong đó * đầu tiên là khả năng phản hồi [ví dụ:. xs, sm, md, lg, xl, xxl] và dấu * thứ hai là số cột [giá trị từ 1 đến 12]

Bootstrap bù đắp

Bạn có thể muốn định vị một cột sao cho có một khoảng trống ở phía bên trái của nó. Ví dụ: trong hầu hết các trang đăng nhập, bạn sẽ thấy biểu mẫu được đặt ở trung tâm với khoảng trống ở bên trái và bên phải

Bootstrap cho phép bạn đạt được điều này một cách dễ dàng bằng cách sử dụng lớp

 Div content

7 trong cột

Lớp

 Div content

7 được sử dụng để đẩy các cột sang bên phải để có thêm khoảng cách ở bên trái

Để thực hiện bù đắp trong bootstrap 3, bạn thêm

 Div 1
Div 2 
 Div 3

7 vào lớp phần tử trong đó * đầu tiên là khả năng phản hồi [xs, sm, md, v.v.] và * thứ hai là số cột bạn muốn bù đắp [ví dụ:. 1, 2, 3, v.v.]

ví dụ 1

 Div content

Trong đoạn mã trên, chúng tôi có một cột chiếm một phần ba [1/3] chiều rộng được đặt ở giữa trang. Chúng tôi đã thực hiện bù trừ cho nó bằng 1/3 [bốn cột] chiều rộng ở bên trái của nó

ví dụ 2

Dưới đây là mã của trang đăng nhập có phần bù gồm 4 cột

 Div 1
Div 2 
 Div 3

0

Dưới đây là ảnh chụp màn hình của trang có mã trên. Bạn có thể thấy rằng ở bên trái của nó có nhiều khoảng trống mà chúng tôi đã thêm vào bằng cách chỉ bao gồm lớp

 Div 1
Div 2 
 Div 3

00

col-md-offset-* không hoạt động

Bạn có thể thấy rằng đoạn mã trên không hoạt động và khoảng trống không được thêm vào bên trái cột của bạn

Lý do tại sao nó không hoạt động là do sử dụng lớp

 Div 1
Div 2 
 Div 3

7 trong bootstrap 4 hoặc phiên bản mới hơn

Kể từ bootstrap 4, lớp

 Div 1
Div 2 
 Div 3

7 đã được thay thế bằng

 Div 1
Div 2 
 Div 3

03 trong đó * đầu tiên là khả năng phản hồi [sm, md, lg, v.v.] và * thứ hai là số lượng cột [ví dụ:. 1, 2, 3, v.v.]

Để sửa nó cho bootstrap 4 và 5, chỉ cần thay đổi lớp thành

 Div 1
Div 2 
 Div 3

04

ví dụ 1

 Div 1
Div 2 
 Div 3

4

ví dụ 2

Dưới đây là một trang đăng nhập ví dụ trong bootstrap 5 với offset

 Div 1
Div 2 
 Div 3

5

Dưới đây là ảnh chụp màn hình của trang mã trên với phần bù của 4 cột ở bên trái

Phần kết luận

Bootstrap offset là một cách tuyệt vời để đẩy các cột lưới sang bên phải, tạo khoảng trống ở bên trái. Điều này có thể áp dụng trong các phạm vi thiết kế web khác nhau, chẳng hạn như khi thiết kế trang đăng nhập, nơi bạn muốn biểu mẫu đăng nhập chỉ chiếm một phần nhỏ ở trung tâm

Khi bạn tìm kiếm trên Internet cách bù trừ, bạn có thể tìm thấy nhiều câu trả lời yêu cầu bạn thêm lớp

 Div 1
Div 2 
 Div 3

7 vào div của mình. Điều này có thể hoạt động hoặc không hoạt động tùy thuộc vào phiên bản bootstrap bạn đang sử dụng

Nếu bạn đang sử dụng Bootstrap 4 hoặc phiên bản mới hơn [mới nhất tại thời điểm viết bài viết này là phiên bản 5], bạn cần thêm/thay đổi lớp offset trong div thành

 Div 1
Div 2 
 Div 3

03 trong đó đầu tiên * biểu thị khả năng phản hồi [ví dụ:. sm, md, lg, v.v.] trong khi * thứ hai đại diện cho một giá trị số nguyên. Giá trị số nguyên này xác định số cột bạn muốn bù từ bên trái. Số cột div của bạn cộng với số cột bạn muốn bù trừ không được vượt quá 12

Làm cách nào để bù đắp trong Bootstrap?

Offset hoạt động như thế nào trong Bootstrap?

Độ lệch 1 trong Bootstrap là gì?

Phần bù trong lưới Bootstrap là gì?