css - 带 Bootstrap 的 Packery 定位

Question

我有一个两列布局，主列中有 Packery。

这在超小型设备、小型设备和大型设备上运行良好。 在中型设备上，“2 列框”不在另一侧。它在它下面跳跃。

我已经编写了这个问题的代码笔:http://codepen.io/anon/pen/pwJsa

希望有人能帮忙!

Answer 1

找到了，感谢这个威胁: https://github.com/metafizzy/packery/issues/42

解决方案是使用 calc() 使框的宽度变小一点:

 .grid-sizer {
    width: 25%;
    width: -webkit-calc( 1/4 * 100% );
    width: calc( 1/4 * 100% );
    height: 150px;
 }

.box2 {
   ...
   width: 50%; 
   width: -webkit-calc( 2/4 * 99.5% );
   width: calc( 2/4 * 99.5% );
   float: left;
   ...

Codepen 示例:http://codepen.io/anon/pen/tprxc