Hướng dẫn fix hiện tượng lỗ trống (xuống dòng) trong Grid System của Bootstrap 3.x

Đây là một hiện tượng lỗi hiển thị rất phổ biến trong Bootstrap 3 và hôm nay, mình sẽ phân tích và hướng dẫn chi tiết cách khắc phục nó.

Hiện tượng lỗi

Grid System của Bootstrap 3 đôi khi tạo một hoặc nhiều lỗ trống: một hoặc nhiều phần tử HTML mang class col-... hiển thị theo một trật tự không như ý muốn (xuống dòng hoặc nhảy ô, tạo thành những lỗ trống).

Ví dụ minh hoạ:

See the Pen Hiện tượng nhảy ô trong Grid System Bootstrap 3 by minhtu-cloudtek (@minhtu-cloudtek) on CodePen.

Nguyên nhân

Cơ chế Grid System của Bootstrap 3 sử dụng kiểu hiển thị (display) block. Chính vì thế nếu các phần tử mang class col-... đôi khi sẽ bị nhảy ô và tạo thành các lỗ trống nếu chúng khác nhau (chênh lệch) về chiều cao, mặc dù xét về chiều ngang, nó hoàn toàn nằm vừa vặn lỗ trống đó.

Vấn đề này đã được khắc phục kể tử phiên bản đầu tiên của Bootstrap 4.

Cách khắc phục (fix)

Nguyên lý: Ta tận dụng cơ chế Grid System của Bootstrap 4 với kiểu hiển thị (display) flex.

Nói đến đây, chắc hẳn các bạn đã hình dung được phần nào cách giải quyết rồi đúng không. Dĩ nhiên là mình cũng sẽ hướng dẫn 2 cách mà mình thường dùng nhất để vận dụng nguyên lý trên vào dự án thực tế.

Cách 1: Tạo một Rule CSS với class row-flex và gắn vào chung với phần tử mang class row (Recommended - Khuyến khích)
  • Bước 1. Tạo một Rule CSS như sau:
    .row-flex {display: flex; flex-wrap: wrap}
  • Bước 2. Gắn class row-flex vào chung với phần tử mang class row

Ví dụ minh hoạ:

See the Pen Fix - C1 - Hiện tượng nhảy ô trong Grid System Bootstrap 3 by minhtu-cloudtek (@minhtu-cloudtek) on CodePen.

Cách 2: Định dạng CSS trực tiếp cho phần tử mang class row

Bạn bổ sung style sau cho phần tử mang class row{display: flex; flex-wrap: wrap}

Trong ví dụ minh hoạ này, mình sẽ dùng phương pháp Inline CSS để các bạn dễ quan sát

See the Pen Fix - C2 - Hiện tượng nhảy ô trong Grid System Bootstrap 3 by minhtu-cloudtek (@minhtu-cloudtek) on CodePen.

Và chúng ta cũng đã đi qua mục cuối cùng trong bài hướng dẫn rồi. Nếu bạn có bất kỳ thắc mắc nào, hay không thực hiện được bước nào, hãy để lại bình luận bên dưới nhé. Nếu bạn cảm thấy bài viết hay và hữu ích, hãy để lại 1 like, share, đánh giá để ủng hộ đội ngũ biên tập của hoccode.org nhé!

Chúc các bạn thực hiện thành công!

Đăng ký để nhận được thông báo mỗi khi có bài viết mới!