+8

Bootstrap Columns: Đồng nhất chiều cao tất cả các cột

Nếu là một lập trình viên, đặc biệt là một lập trình viên WEB thì chắc hẳn không ai là chưa từng nghe tới Bootstrap. Bootstrap là một framework cho phép thiết kế website reponsive nhanh hơn và dễ dàng hơn, nó bao gồm các HTML, CSS templates và Javascript cho phép tạo ra những thứ cơ bản như: tables, navigation, modals, ...

Một trong những tính năng tuyệt vời của BbootstrapGrid System. Nó là một hệ thống lưới giúp cho người sử dụng có thể dễ dàng thao tác với cột. Được cấu thành bởi 12 cột, kích thước mỗi cột chiếm 1 % nhất định kích thước của layout và đương nhiên là kích thước của các cột này đã được Bootstrap tính sẵn cho chúng ta rồi. Trọng tâm của bài này không phải là giới thiệu về Grid system nên mọi người có thể tìm hiểu về nó ở những nguồn khác nhé. 😄. Có một vấn đề chắc là khi làm việc với Grid system không khó để phát hiện ra đó chính là chiều cao của các cột. Nói một cách dễ hiểu hơn các cột chứa nội dung khác nhau sẽ có chiều cao khác nhau điều này có thể không quá quan trọng nếu như giao diện của bạn có 1 hàng nhưng nó sẽ thực sự là vấn đề nếu như giao diện của bạn có nhiều hàng trong mỗi hàng bao gồm nhiều cột khác nhau. Lúc này nếu mỗi cột có 1 chiều cao khác nhua thì giao diện bạn vừa thiết kết đúng là 1 thảm họa. Trong bài này tối xin chia sẻ với các bạn một số phương pháp có thể giúp bạn set chiều cao cho tất cả các cột trong giao diện của mình giống nhau. ^^

Cách 1: Sử dụng JavaScript hoặc MatchHeight.js

Khi gặp vấn đề như phần mở đầu bài tối có nhắc tới thì các đầu tiên và cũng là cách mà nhiều lập trình viên sẽ nghĩ tới đó là sử dung Javascript. Nếu các bạn lựa chọn cách sử dụng Javascript thì tôi xin giới thiệu với bạn một hư viện có thể gọi là "the most official" để xử lý vấn đề trên đó là Match Height. Các bạn có thể tham khảo thêm thôm tin về thư viện này ở :

Để sử dụng thì chỉ cần thêm links sau vào file html của bạn.

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.0/jquery.matchHeight-min.js"><script>

Cũng như đã số các thư viện js khác, matchHeight siêu siêu siêu dễ sử dụng. Công dụng chính của thư viện này bao gồm:

  • Giúp các cột khác nhau có cùng chiều cao:

$(function() {
    $('.box').matchHeight();
});
  • Gán cho tất cả các cột trong layout có cùng 1 chiều cao:
$(function() {
    $('.box').matchHeight(false);
});

Chú ý đến Responsive: Class box của bạn cần phải có thuộc tính sau:

.box {
        height: auto !important;
    } 

Cách 2: Khiến các hàng hoạt động như một table Khi thiết kế giao diện dạng lưới thì chắc chắn những front-end developers sẽ ít khi xử dụng đến tables, nhưng tables không thật sự là xấu nếu biết xử dụng đúng cách. Rát nhiều người không nhận ra rằng, chúng ta có thể bắt các thẻ div và thuộc tính bên trong của nó hoạt động như một bảng. Để ý rằng, các cột của bảng đã có được chiều cao bằng nhau nên công việc của chúng ta chỉ cần hướng cho các hàng trên giao diện của mình nghĩ rằng nó là một tables. Xem demo dưới đây:

.is-table-row {
        display: table;
    }
    .is-table-row [class*="col-"] {
        float: none;
        display: table-cell;
        vertical-align: top;
    }

Thêm HTML vào:

<div class="row is-table-row">
    <div class="col-sm-4">...</div>
    <div class="col-sm-4">This column has content!!! This column has content!!! This column has content!!! This column has content!!! This column has content!!! This column has content!!! This column has content!!! This column has content!!! This column has content!!!</div>
    <div class="col-sm-4">...</div>
</div>

Để tiện theo dỗi kết quả, thêm thuộc tính sau:

.col-sm-4 {
border: solid;
border-width: 1px;
}

Chạy chương trình thu được như sau:

Có thể các bạn chưa tin vào điều mình thấy, vậy hãy xóa đoạn css đầu tiền đi và chạy lại chương trình nào:

Woww! Nếu không có đoạn CSS đó thì giao diện của chúng ta sẽ be bét như hình dưới. =)). Còn có CSS thì giao diện của chúng ta sẽ mượt mà như hình trên. :v

Cách 3: Sử dụng Negative Margin và Huge Padding Trick Cách này có thể nói là rất hay và là giải pháp tối ưu cho nhiêu người, với phương pháp này trong bất kỳ tình huống nào nó vẫn hoạt động và nó hoạt động trên tất cả các cột bất kể kích thước của các cột đó. Tôi cũng không biết giải thích thế nào hơn, hãy đi vào thực tiễn và kiểm tra tính đúng đắn của phương pháp này.

Vẫn làm với ví dụ trên nhé. 😃. Thay đổi CSS bằng đoạn sau:

.row.match-my-cols {
    overflow: hidden; 
}

.row.match-my-cols [class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

và tất nhiên class row is-table-row của thẻ div cũng được cập nhật thành row match-my-cols. Công việc đã xong, hãy chạy chương trình và xem kết quả. ^^. Cơ chế họat động của phương pháp này vô cùng đơn giản. Nó gán cho chiều cao của mỗi column thêm 99999px thông qua padding, và sau đó xử dụng margin để set vị trí như thể không có gì ở đây. cuối cùng là thẻ div của chúng ta cần phải ẩn tất cả những gì bị overflowed.

Cách 4: Sử dụng Flexbox Flexbox nói nôm la là một kiểu dàn trang mà nó sẽ tự cân đối kích thước của các phần tử bên trong để hiển thị trên mọi thiết bị. Nói cách khác, bạn không cần thiết lập kích thước của phần tử, không cần cho nó float chỉ cần thiết lập cho nó hiển thị chiều ngang hay chiều dọc, lúc đó các phần tử bên trong sẽ hiển thị theo ý muốn. Để nghiên cứu thêm về Flexbox hãy tham khảo ở đây CSS3 Flexbox . Hãy xem demo sau:

.row.is-flex {
    display: flex;
    flex-wrap: wrap;
}
.row.is-flex > [class*='col-'] {
    display: flex;
    flex-direction: column;
}

/*
* And with max cross-browser enabled.
* Nobody should ever write this by hand. 
* Use a preprocesser with autoprefixing.
*/
.row.is-flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.row.is-flex > [class*='col-'] {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

update lại class _row is-table-row _ thành row is-flex và chạy chương trình.

Tất cả cách trên đều cho bạn một kết quả như mong muốn. Hãy lựa chọn phương pháp phù hợp với bản thân và sử dụng nhé. Chúc các bạn thành công! ^^


All rights reserved

Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí