Code hiển thị grid 4 ô mỗi dòng đang để là
col-md-3 col-sm-6
col-md-3 col-sm-6
col-md-3 col-sm-6
col-md-3 col-sm-6
col-md-3 col-sm-6
col-md-3 col-sm-6
col-md-3 col-sm-6
col-md-3 col-sm-6
Tuy nhiên do chiều cao các ô ko giống nhau nên xảy ra lỗi hiển thị như sau:
Vậy làm sao để sửa lỗi hiển thị dòng thì 4 ô, dòng thì lại chỉ có 1 ô, thay vì tất cả mỗi dòng đáng lẽ ra đều phải 4 ô của grid dạng này? Sau mỗi 4 ô phải clear left là được. Tương tự, sau mỗi 2 ô (khi mà màn hình có chiều rộng col-sm-6 được apply) cũng phải clear left để không bị lỗi dòng thì 2 ô, dòng thì 1 ô.
Thêm đoạn code sau là ok nhé:
@media (min-width: 1200px) {
.col-md-3:nth-child(4n+1) {
clear: left;
}
}
@media (min-width: 768px) and (max-width: 1199px) {
.col-sm-6:nth-child(2n+1) {
clear: left;
}
}