css - Bootstrap : How to deal with iMac vs typical laptop sizes?

Question

所以我目前正在开发一个管理仪表板，我在办公室的工作站是 iMac(我认为是 2,500px x 1,5000~)，在家里我使用分辨率为 1366 x 768 的典型笔记本电脑。

我的问题是这两种分辨率都属于 bootstrap 4 的 XL 类别，但它们的显示方式不同。 iMac 的侧边栏完美无缺，但笔记本电脑的侧边栏以丑陋的方式包裹了按钮。有没有办法正确解决这个问题？比如扩展典型的视口(viewport)大小并可能在其中添加 XXL？

附言我当然可以采取一些解决方法，但我正在寻找一种更好的方法来解决这个问题，而不仅仅是临时修复。

谢谢

Answer 1

只需在您的 CSS 中为大屏幕尺寸添加一些媒体查询:

@media only screen and (min-width: 1366px) {
    body {
        ...
    }
}