Bootstrap列高度导致事物混乱

时间:2014-11-05 10:11:37

标签: css twitter-bootstrap twitter-bootstrap-3

我有一个产品页面,其中一些可能有额外的行。无论如何,我的目标是让每个产品在整个页面上显示,从左到右,从上到下。

请参阅此示例:http://jsbin.com/lijisa

如果您修改JSON数据,以便每个产品在variations数组中都有两个数字,那么一切都完美排列。

如何在不实际设置硬高度值的情况下将所有列设置为标准高度?

2 个答案:

答案 0 :(得分:0)

您正在寻找的东西被称为"砌体布局"有一些库可以让你做这样的事情

Salvattore http://salvattore.com/

砌体 http://masonry.desandro.com/

我还发现这可以使用列宽实现相同的效果 http://www.bootply.com/118335

答案 1 :(得分:0)

使用hidden/visible帮助程序类与clearfix结合使用,仅在适当的设备上重置行,如下所示:

示例:http://www.bootply.com/YpH56xyzDB

隐藏/可见方面允许您仅在正确的设备上清除特定列之间的修复。