CSS - Flexbox - Bootstrap - Đổi cột từ trái sang phải khi view ở mobile

CSS - Flexbox - Bootstrap - Đổi cột từ trái sang phải khi view ở mobile

Day 37

Bài toán: Khi xem ví dụ mẫu của Bootstrap 4.0, phần "Check form", thấy khi chuyển sang chế độ mobile, cột "Your cart" được đặt lên đầu "Billing address", mà bình thường, nếu không có thiết lập gì đặc biệt, nó sẽ được đặt xuống dưới.

alt text

Trả lời: Hóa ra ở đây họ sử dụng flexbox kết hợp với hệ grid bình thường:

<div class="row">
        <div class="col-md-4 order-md-2">Your cart</div>
        </div class="col-md-8 order-md-1">Billing address</div>
 </div>

Theo hệ grid bình thường, ở medium size (ứng với chữ "md"):

  • Cột "Billing addres" sẽ chiếm 8 trong 12 phần của "row",
  • Cột "Your cart" sẽ chiếm 4 trong 12 phần của "row"

Nếu chỉ dừng ở "col-md-4" và "col-md-8", thì "Your cart" sẽ ở bên trái, "Billing address" sẽ ở bên phải. Tuy nhiên, ở đây còn kết hợp với "flexbox", điều chỉnh "order" của từng cột, gán "Your cart" là thứ tự số 2, còn "Billing address" thứ tự 1. Vì thế mà ở medium size, thứ tự 2 bạn sẽ giống như ảnh trên, ngược với thứ tự viết html.

Còn khi size đã bên dưới mức "medium" (tức là từ 768px trở xuống), thì "flexbox" không còn được áp dụng nữa. Thứ tự sẽ trở lại đúng với cách viết HTML, "Your cart" ở trên, "Billing address" ở dưới.

Đây là 1 thủ thuật hay cần nhớ. Nó liên quan đến UX, nếu làm bình thường thì phải viết khá nhiều, vậy mà với flexbox chỉ cần vài dòng.

Ghi chú thêm:

Bài toán này có thể dùng bootstrap 3.0 kèm với float. Demo tại

Link tham khảo

ngminhtrung 03-04-2018

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Minh-Trung Nguyễn

61 bài viết.
88 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
49 15
Đăng lại một bài đã viết từ cách đây mấy tháng. Chủ đề này đã có không ít, nhưng chẳng hiểu sao lượng bài tự viết của dân lập trình người Việt ta v...
Minh-Trung Nguyễn viết 10 tháng trước
49 15
White
28 5
Ghi chú: Tiêu đề hoàn toàn mang tính câu view. Bài copy từ blog của tác giả :) Tại sao lại có bài viết này? Một ngày đẹp giời tôi cần kiểm t...
Minh-Trung Nguyễn viết 1 năm trước
28 5
White
18 4
Về bước tìm và xử lý dữ liệu của Việt Nam phục vụ Data Visualization nền web Làm việc với D3js được nửa năm, một trong những điều bận lòng là chưa...
Minh-Trung Nguyễn viết 10 tháng trước
18 4
Bài viết liên quan
White
3 1
Javascript inititalValue trong reduce() có quan trọng không? Day 41: Đọc code mẫu về hàm reduce() trong (Link), thấy hàm reduce() khá "đơn giản"....
Minh-Trung Nguyễn viết 10 tháng trước
3 1
White
2 0
D3.js Biểu diễn dữ liệu dạng tree bằng việc trải nó ra trên bản đồ Series Today I Learn trong vòng 100 ngày thử thách bản thân ngày 15. Mỗi ngày 1...
Minh-Trung Nguyễn viết 1 năm trước
2 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
61 bài viết.
88 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!