Question

我一直在不同设备上遇到Bootstrap Grid的一些问题。根据Bootstrap的文档，HTML中的列大小取决于设备的窗口大小。例如：

超小576px，小> = 768px，中> = 992px，大> = 1200px

但是，在应该被视为中型设备（在Google Chrome的开发人员工具上为1024 x 768的旋转iPad）上，Bootstrap会将其视为大型设备。我的代码如下：

<div class="col-lg-2 col-md-4 col-sm-4">

在横向旋转中，iPad的div的列大小为2，这不应该发生。我进行了控制台日志测试以确保屏幕尺寸，确实发现它为1024px。为什么会发生这种情况的任何想法？

Answer 1

问题是您的数学与Bootstrap计算断点的方式略有出入，将大断点（>= 992px）与特大混淆了断点（>= 1200px）。

虽然您的iPad没有落入额外大断点（使用.col-xl-前缀），但它确实落入了大断点断点（使用.col-lg-前缀），因此正确应用了.col-lg-2类。因此，您的元素占用两列。

有关断点及其对应类的方便列表，请参见the following image：