2014-05-10 79 views
0

所以基本上我正在使用bootstrap 3構建全屏食物圖像網格。我使用了容器流體和相應的列來定義我的行和斷點的寬度。每列都包含一張食物圖像並使用該類 - col-lg-2 col-md-3 col-sm-4 col-xs-4Bootstrap 3網格重新調整大小問題

我不希望圖像之間存在間隙,所以我刪除了分配給列類的左側和右側填充符給我提供了我想要的確切外觀。現在,當我調整網格大小時,它一切正常。但是,在屏幕寬度950px和980px之間,圖像之間垂直間有一個溝槽。我不確定是什麼導致了這一點。有人有想法嗎?

我附上了幾張照片與bootply

http://www.bootply.com/xXaaLRWKTL說明一起。這個例子發生在平板電腦屏幕中斷點周圍的例子中。調整窗口的大小,並採取一看,你會看到水溝回來斷點處

http://imgur.com/a/ACSwA

感謝

回答

1

在這個例子的情況下,這是因爲圖像。

圖像的類別爲img-responsive,它設置屬性max-width: 100%。由於該特定圖片的最大寬度爲320px,圖片本身停在320px(實際div的行爲應該是這樣)。要麼使用更大的圖像,要麼刪除最大寬度屬性並設置width: 100%

+0

完美的工作!非常感謝 :) – user3051223