css - 阻止大型显示设置时 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时，缩略图重新排列，一行只有两个。

我该如何解决这个问题？

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

这是我的 fiddle :https://jsfiddle.net/michi001/b7n1byvx/

Answer 1

Bootstrap 有一个“CSS”规则，一旦您点击“1200px”，它会将“span4”元素的宽度从 300px 更改为 370px。

因此，在您的 CSS 中，您可以添加一条规则，使“span4”元素的宽度保持在 300 像素。

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

当您超过 1200 宽度阈值时，这会使缩略图保持 3 横跨。

fiddle :

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