Yêu cầu thg 4 20, 2020 10:38 SA 353 0 1
  • 353 0 1
0

Responsive Bootstrap 4

Chia sẻ
  • 353 0 1

Cho mình hỏi một vấn đề: Cách custom col khi một màn hình 24 inch với 14 inch (14 inch sử dụng display recommended 150%) có cùng tỉ lệ 1920x1080.

Mình muốn hiển thị màn 24 inch bình thường còn 14inch như tỉ lệ 1366x768 thì làm cách nào ạ?

Vd: mình có 4 box col-lg-3 thì màn 24inch hiển thị 4 box trên cùng 1 hàng, còn với 14inch thì 3 box trên cùng 1 hàng

1 CÂU TRẢ LỜI


Đã trả lời thg 4 20, 2020 1:07 CH
Đã được chấp nhận
+2

bản chất về Grid của bootstrap là đã chia sẵn thành 12 phần rồi. nên các class .col-**-x bạn không nên thay đổi thì hơn

Tuy nhiên có 2 cách để bạn định nghĩa component như sau:

  1. Dùng sẵn grid của Bootstrap

Screen Shot 2020-04-20 at 21.59.38.png

Bạn có thể thấy là lg, md,.... ở đây đều khác nhau. Nên nếu bạn muốn thì có thể cú pháp <htmltag class="col-lg-3 col-md-4"></htmltag>. Nó sẽ tự động grid cho bạn 2. Dùng media width Bạn đặt hẳn 1 cái class CSS là .component

Và ở css định nghĩa

.component {
  width: 33%
}

@media screen and (min-width: 2000px) {
  .component {
    width: 25%
  }
}

Tham khảo đây nhé:

https://getbootstrap.com/docs/4.1/layout/grid/

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Chia sẻ
Avatar Minh Anh Nguyen @minhanhnguyenthi
thg 4 21, 2020 2:24 SA

Mình cảm ơn nhé @devil_boom_129

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í