Responsive Bootstrap 4

Question

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.

Accepted Answer

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:

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

1 CÂU TRẢ LỜI