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 并且它工作完美，但是当我在带有 retina 屏幕的 macbook pro 13' 屏幕上测试它时它使用 col-xl-2 也看起来很奇怪。我如何处理这些东西并指定视网膜屏幕的列大小？

Answer 1

尝试：

col-md-4

或

col-sm-4

Bootstrap documentation (Grid)

更新

由于视网膜显示器的高分辨率，检测到大屏幕。

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

Customizable Bootstrap 3.3

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

或者试试这个 (source):

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