Khi sử dụng hệ thống lưới (grid system) của Bootstrap với 12 cột, trường hợp của bạn muốn hai cột sidebar ở hai bên không quá to cũng không quá nhỏ. Nếu sử dụng col-md-3 (tức là mỗi sidebar chiếm 3 cột, 25% màn hình) thì sidebar có thể khá to, nhưng nếu dùng col-md-2 (chiếm 2 cột, 16.67%) thì lại quá nhỏ, dẫn đến không cân đối. Dưới đây là một số giải pháp có thể giúp cân bằng tốt hơn:
Nội dung chính
Sử dụng col-md-2.5 và col-md-7 (thủ thuật với khoảng cách)
- Bootstrap không hỗ trợ phân chia cột theo số lẻ như 2.5 cột, nhưng bạn có thể sử dụng CSS tùy chỉnh để làm cho kích thước của cột sidebar có vẻ như chiếm khoảng 2.5 cột.
- Ví dụ: Bạn sử dụng
col-md-2cho sidebar nhưng thêm CSS để tăng chiều rộng một chút:
|
1 2 3 4 5 |
<div class="row"> <div class="col-md-2 custom-sidebar">Sidebar Left</div> <div class="col-md-8">Main Content</div> <div class="col-md-2 custom-sidebar">Sidebar Right</div> </div> |
|
1 2 3 |
.custom-sidebar { width: 21%; /* Tăng chiều rộng một chút so với 16.67% của 2 cột */ } |
Lúc này, bạn có sidebar lớn hơn 2 cột một chút, nhưng không quá to như 3 cột.
Sử dụng offset để căn chỉnh
- Thay vì tăng trực tiếp chiều rộng của các cột sidebar, bạn có thể sử dụng offset để đẩy phần chính giữa rộng hơn một chút, tạo cảm giác hai sidebar nhỏ lại.
- Ví dụ:
|
1 2 3 4 5 |
<div class="row"> <div class="col-md-2">Sidebar Left</div> <div class="col-md-7 col-md-offset-1">Main Content</div> <div class="col-md-2">Sidebar Right</div> </div> |
Offset sẽ giúp tạo ra khoảng trống giữa các cột mà không làm cho cột giữa quá lớn, đồng thời làm sidebar không quá nhỏ.
Sử dụng hệ thống lưới linh hoạt hơn (flexbox)
- Nếu muốn độ linh hoạt cao hơn mà không cần dựa vào Bootstrap Grid, bạn có thể chuyển qua sử dụng flexbox để phân chia chiều rộng một cách linh hoạt hơn.
Ví dụ:
|
1 2 3 4 5 |
<div class="row d-flex"> <div class="col-md-2 flex-grow-1">Sidebar Left</div> <div class="col-md-8 flex-grow-2">Main Content</div> <div class="col-md-2 flex-grow-1">Sidebar Right</div> </div> |
flex-grow giúp điều chỉnh kích thước tự động dựa trên không gian trống, tạo ra một bố cục cân bằng hơn mà không cần phải chia quá cứng nhắc theo hệ thống lưới cột của Bootstrap.
Sử dụng lớp tùy chỉnh cho các kích thước khác nhau
- Tùy thuộc vào kích thước màn hình, bạn có thể điều chỉnh số lượng cột bằng cách sử dụng các class responsive của Bootstrap, chẳng hạn như
col-lg-3 col-md-2.
|
1 2 3 4 5 |
<div class="row"> <div class="col-lg-3 col-md-2">Sidebar Left</div> <div class="col-lg-6 col-md-8">Main Content</div> <div class="col-lg-3 col-md-2">Sidebar Right</div> </div> |
Khi màn hình lớn (desktop), sidebar sẽ chiếm 3 cột, còn khi trên các thiết bị nhỏ hơn (tablet), sidebar sẽ giảm xuống 2 cột.
Thêm padding và margin cho các sidebar
- Đôi khi chỉ cần điều chỉnh padding hoặc margin cho hai cột sidebar để tạo cảm giác chúng nhỏ hơn mà vẫn đảm bảo tỷ lệ hợp lý. Bạn có thể thêm padding vào các cột bằng cách sử dụng các class Bootstrap có sẵn như
p-md-2hoặc tạo class tùy chỉnh cho padding, margin.
Sử dụng col-md-2 nhưng thêm khoảng trống (gutter) giữa các cột
- Nếu bạn muốn hai cột sidebar nhỏ nhưng cảm giác vẫn thoáng, bạn có thể thêm gutter giữa các cột để tạo thêm khoảng trống giữa các phần.
|
1 2 3 4 5 |
<div class="row gx-4"> <div class="col-md-2">Sidebar Left</div> <div class="col-md-8">Main Content</div> <div class="col-md-2">Sidebar Right</div> </div> |
gx-4 tạo ra khoảng cách giữa các cột giúp giao diện trở nên thoáng hơn.
Tóm lại
Bạn có thể linh hoạt sử dụng các giải pháp như CSS tùy chỉnh, offset, hoặc flexbox để điều chỉnh kích thước cột theo mong muốn mà không bị gò bó vào hệ thống 12 cột chuẩn của Bootstrap.