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 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 Show 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 8Bootstrap 3 lớp lướiDướ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 9. Đầu tiên * lấy lớp chiều rộng thiết bị, ví dụ: 0, 1, v.v. Dấu * cuối cùng lấy số lượng cột, vd. từ 1 đến 12Các div này cần phải ở bên trong một div khác với lớp "hàng" 0. Những con số trong. col-*-* phải luôn thêm tối đa 12 cho mỗi hàngVậ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
Đ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ướiTrong bootstrap 4, một số thay đổi đã được thực hiện đối với các lớp hệ thống lướ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ướiNhiề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 4 cho các thiết bị xxlargeClassDescriptioncol-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 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 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ù đắpBạ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 7 trong cộtLớp 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 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
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ụ 2Dưới đây là mã của trang đăng nhập có phần bù gồm 4 cột 0Dướ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 00col-md-offset-* không hoạt độngBạ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 7 trong bootstrap 4 hoặc phiên bản mới hơnKể từ bootstrap 4, lớp 7 đã được thay thế bằng 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 04ví dụ 1 4ví dụ 2Dưới đây là một trang đăng nhập ví dụ trong bootstrap 5 với offset 5Dướ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ậnBootstrap 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 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ụngNế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 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?Cách sử dụng Bootstrap Offset. offset-md-3 sẽ bù phần tử cột mong muốn bằng 3 cột ở bên phải so với vị trí mặc định của nó trên kích thước màn hình trung bình trở lên. . các lớp bù luôn dịch chuyển nội dung của nó sang phải.
Offset hoạt động như thế nào trong Bootstrap?Các lớp offset
. các lớp offset-md-* Move columns to the right using .offset-md-* classes . Các lớp này tăng lề trái của một cột theo * cột. Ví dụ,. offset-md-4 di chuyển. col-md-4 trên bốn cột.
Độ lệch 1 trong Bootstrap là gì?Phần bù được dùng để đẩy các cột lên để có thêm khoảng cách . Để sử dụng độ lệch trên màn hình lớn, hãy sử dụng. các lớp col-md-offset-*.
Phần bù trong lưới Bootstrap là gì?Phần bù bootstrap là một phần của hệ thống lưới hữu ích để tạo khoảng trống trong cột ở phía bên trái . Phần bù bootstrap đang tạo một số không gian trống trong cột cho ứng dụng đáp ứng. |