与引导程序的Packery定位

时间:2014-05-20 14:47:18

标签: css twitter-bootstrap-3 packery

我在主列中有一个包含Packery的两列布局。

这适用于超小型设备,小型设备和大型设备。 在中型设备上,“2柱盒”不在另一侧。它在它下面跳跃。

我已经解决了这个问题:http://codepen.io/anon/pen/pwJsa

我希望有人可以提供帮助!

1 个答案:

答案 0 :(得分:2)

发现它,对此威胁: 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