Bootstrap 3网格重新调整大小问题

时间:2014-05-10 09:55:31

标签: html css twitter-bootstrap-3

所以基本上我正在使用bootstrap 3构建全屏食物图像网格。我使用了容器流体和相应的列来定义行和断点的宽度。每个列都包含一个食物图像并使用该类 - col-lg-2 col-md-3 col-sm-4 col-xs-4

我不想在图像之间留下阴沟,所以我删除了分配给列类的左右填充,这给了我想要的精确外观。现在,当我调整网格大小时,一切正常。然而,在屏幕宽度950px和980px之间,图像在它们之间垂直地具有沟槽。我不确定是什么造成这种情况。有没有人有想法?

我附上了几张照片以及bootply

http://www.bootply.com/xXaaLRWKTL。这个例子发生在平板电脑屏幕断点附近。调整窗口大小并看一看,你会看到天沟在断点处回来

http://imgur.com/a/ACSwA

由于

1 个答案:

答案 0 :(得分:1)

在示例的情况下,这是因为图像。

图片包含类img-responsive,用于设置属性max-width: 100%。由于该特定图像的最大宽度为320px,因此图像本身停止在320px(实际的div正如它应该的那样)。要么使用更大的图像,要么删除max-width属性并设置width: 100%