<!-- Cách viết sai -->
<div class="row">
Some content
</div>
<!-- Cách viết đúng -->
<div class="row">
<div class="col-md-12">
Nội dung....
</div>
</div>
Lưu ý: Các dòng và cột có mối ràng buộc chặt chẽ, mặc định, mỗi cột có một khoảng đệm padding-left: 15px
và padding-right: 15px
để giữ khoảng cách giữa lề và nội dung, tuy nhiên điều này đồng nghĩa với việc kích thước hiển thị nội dung bị thu hẹp vào 15px cho lề trái và phải. Để bù lại, mỗi dòng luôn có một khoảng đệm với giá trị âm là padding-left: -15px
và padding-right: -15px
. Đây là lý do tại sao luôn luôn đặt các cột trong hàng (Xem ví dụ bên trên).
.col-md-NUMBER
. NUMBER là một số nguyên từ 1 đến 12. Khi đặt một cột bên trong một hàng, chúng ta phải tính toán sao cho tổng số lượng các cột luôn bằng 12. Tùy thuộc vào NUMBER, mỗi cột sẽ chiếm một tỉ lệ tương ứng trên tổng kích thuớc của dòng. Như 6, sẽ là 50% (12/6), 3 sẽ là 25% (12/3).
<div class="row">
<div class="col-md-12">
Full width
</div>
</div>
<div class="row">
<div class="col-md-3">
25%
</div>
<div class="col-md-3">
25%
</div>
<div class="col-md-6">
50%
</div>
</div>
<div class="row">
<div class="col-xs-8"></div>
<div class="col-xs-4"></div>
<div class="col-xs-9">
This column will move to the next line.
</div>
</div>
.col-md-NUMBER
thì -md- đại diện cho kích thước màn hình trung bình (thường là màn hình Desktop hoặc Laptop). Bootstrap có một số lớp đại diện cho các kích thước màn hình khác nhau:
.col-xs-NUMBER
.col-sm-NUMBER
.col-md-NUMBER
.col-lg-NUMBER
class="col-xs-12 col-md-6"
, thì chúng ta biết, trên tất cả các kích thước màn hình, cột thứ nhất sẽ chia 50% và cột thứ 2 cũng là 50%.
<div class="row">
<div class="col-xs-12 col-md-6">
<p>
Try resizing the browser to see this text and the image rearrange for optimal viewing.
</p>
</div>
<div class="col-xs-12 col-md-6"><img src="city.jpg" class="img-responsive">
</div>
</div>
.clearfix
, nó sẽ buộc các cột phía sau di chuyển sang một dòng mới.
<div class="row">
<div class="col-xs-6 tall-column">
A column much taller than the rest.
</div>
<div class="col-xs-6"></div>
<div class="clearfix"></div>
<div class="col-xs-6"></div>
</div>
Bạn có thể sử dụng Bootstrap’s responsive utility classes để kiểm soát clearfix khi đang họat động.
.col-md-offset-NUMBER
cho một cột bất kỳ sẽ di chuyển nó sang bên phải Bạn có thể sửa lại các giá trị NUMBER
khác nhau trên cách kích thước màn hình khác nhau (xs, sm, md, lg)
<div class="row">
<div class="col-md-6 col-md-offset-3"></div>
<div class="col-md-10 col-md-offset-1"></div>
</div>
col-SIZE-push-NUMBER
, and .col-SIZE-pull-NUMBER
. Giá trị SIZE có thể là xm, xs, md hay lg - tùy vào kích thước màn hình muốn thay đổi. NUMBER là số lượng (cột) muốn di chuyển.
<div class="row">
<div class="col-xs-4 col-md-push-8">
On laptop and desktop screens this text will go to the right and the image will go to the left, changing places.
</div>
<div class="col-xs-8 col-md-pull-4"><img src="city.jpg" class="img-responsive">
</div>
</div>
Nguồn tin: tutorialzine.com
Trung tâm ứng dụng NukeViet
Ghi rõ nguồn khi sao chép thông tin từ website này.
Sử dụng CMS NukeViet, thiết kế bởi TDFOSS.,LTD