css - 如何在 Bootstrap 4 上定位笔记本电脑和台式机？

Question

Bootstrap 最大的网格是 1200 像素宽，但在某些情况下，我必须针对全局最常见的两种分辨率(1366x768 和 1920x1080)调整 CSS。

在 Bootstrap 4 中定位笔记本电脑(> 1200 < 1400)和实际台式机(> 1400)的正确方法是什么？

Answer 1

看看这是否对你有帮助:
https://codepen.io/panchroma/pen/GxLVyp

HTML

<div class="container">
 <!-- content here -->
</div>  

CSS

@media (min-width: 1200px) and (max-width: 1400px){ 
  .container{
    max-width: 1168px;
    background-color:olive;
  }
}

@media (min-width: 1401px) { 
  .container{
    max-width: 1368px;
    background-color:teal;
  }
}  

根据需要为这 2 个新媒体查询编辑最大宽度和其他样式。

上面的应该适用于 Bootstrap 4 auto layout columns同样，这里有一个例子:https://codepen.io/panchroma/pen/VXOZVW

祝你好运!