Bootstrap 3网格调整大小问题

时间:2014-05-10 06:09:53

标签: html css grid twitter-bootstrap-3

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

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

我附上了几张图片来说明

http://imgur.com/a/ACSwA

由于

编辑:http://www.bootply.com/xXaaLRWKTL - Bootply。在下面的例子中,沟槽以991px宽度返回

2 个答案:

答案 0 :(得分:1)

我认为排水沟实际上并没有回来。图像达到其最大宽度/高度,因此不再按比例放大。这个最大w / h发生在Bootstrap切换到下一个中​​断之前,因此图像之间存在间隙。

如果使用最大宽度和高度较大的图像,则不应有间隙。

答案 1 :(得分:-1)

我建议使用媒体查询来调整图片之间的空格。

@media (max-width: 978px ){
    div {
        padding-left: 0px ; 
        padding-right: 0px;
    }
}

希望对你有用