Bootstrap列SOMETIMES在移动设备上相互重叠

Question

我正在使用Bootstrap网格系统，并且正在使用WordPress循环生成许多列（可能是不相关的信息，但是我以防万一）。生成的结构如下所示：

<div class="container">
   <div class="row">
      <div class="col-xs-12 col-sm-6 col-md-4">
         ...
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4">
         ...
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4">
         ...
      </div>
   </div>
</div>

这是在移动屏幕上应如何渲染（如col-xs-12）：

+--------------+
| COLUMN       |
|              |
|              |
+--------------+
+--------------+
| COLUMN       |
|              |
|              |
+--------------+
+--------------+
| COLUMN       |
|              |
|              |
+--------------+

这有时会被渲染：

+--------------+
| COLUMN       |
+--------------+
| COLUMN       |
+--------------+
| COLUMN       |
|              |
|              |
+--------------+

...下面的列与上面的列重叠。每3个案例中就有1个发生这种情况，因此非常关键。如果有大约12列，则断开的列数会有所不同。有时所有这些都很好地渲染。有时只有前三个看起来不错，其余的则重叠，有时只有最后两个重叠。

这使我认为这是某种加载问题（如果页面设法以足够快的速度加载自身，则各列将以应有的方式显示，反之亦然），但是我和往常一样使用了完全相同的Bootstrap库，并且这些列会产生与以往完全相同的CSS属性。我正在使用Isotope .js库进行动态过滤-但我尝试完全禁用它（因为它更改了默认的Bootstrap的CSS），问题仍然存在。

PS：在台式机版的Chrome（启用了移动响应仿真）中，它始终呈现良好的效果。它仅在Android版本的Chrome上重叠（还没有机会在其他平台上对其进行测试）。