视网膜屏幕上的 Bootstrap 4 网格系统

Question

我有这样的 div：

<div class="col-lg-4 col-xl-4 col-md-6 col-sm-12 px-0 p-4">

当我在 27' 屏幕上测试它时，它使用 col-xl-2 并且效果很好，但是当我在 macbook pro 的 13' 屏幕上使用 retina 屏幕上测试它时，它也使用 col-xl-2 并且看起来很奇怪。我如何处理这些东西并为视网膜屏幕指定列大小？

Answer 1

试试：

col-md-4

或

col-sm-4

Bootstrap documentation (Grid)

更新

由于 Retina 显示器的高分辨率而检测到大屏幕。

您可以在 Bootstrap 中设置自己的breakpoints。

Customizable Bootstrap 3.3

也许this 的回答可以为您指明正确的方向。

或者试试这个 (source)：

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    /* Retina-specific stuff here */
}