css – 阻止大显示设置时,Bootstrap缩略图搞砸了

使用Bootstrap 2.3.2我使用以下解决方案阻止我的页面适应大显示设置：

@media (min-width:970px) and (max-width: 2500px) {
    .container {
        width: 970px;
    }   
}  

…在我创建缩略图之前一直工作正常：

连续有三个缩略图,但是当我拉动浏览器窗口超过1200px时,缩略图会重新排列,并且只有两个按行排列.

我怎么解决这个问题？

我是否需要重新定义所有bootstrap .span标签？

这是我的小提琴：https://jsfiddle.net/michi001/b7n1byvx/

最佳答案

一旦你点击“1200px”,Bootstrap有一个“CSS”规则,它将“span4”元素的宽度从300px改为370px.

所以在你的CSS中你可以添加一个规则,使“span4”元素保持在300px的宽度.

@media (min-width:970px) and (max-width: 2500px) {
  .container {
    width: 970px;
  }
  .span4 {
    width: 300px;
  }
} 

当您越过1200宽度阈值时,这会使缩略图3保持对齐.

小提琴：

https://jsfiddle.net/b7n1byvx/2/