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

Question

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

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

...在我创建缩略图之前一直工作正常:

<div class="container frame">
    <h3>grid problems above 1200px</h3>
    <ul class="thumbnails">
        <li class="span4">
            <div class="thumbnail">Thumbnail #1</div>
        </li>
        <li class="span4">
            <div class="thumbnail">Thumbnail #2</div>
        </li>
        <li class="span4">
            <div class="thumbnail">Thumbnail #3</div>
        </li>
        <li class="span4">
            <div class="thumbnail">Thumbnail #4</div>
        </li>
        <li class="span4">
            <div class="thumbnail">Thumbnail #5</div>
        </li>
    </ul>
</div>

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

我怎么解决这个问题？

我是否需要重新定义所有这些引导.span标签？

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

Answer 1

Bootstrap 有一个“CSS”规则，一旦你点击“1200px”，它会将“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/