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有一个＆＃34; CSS＆＃34;一旦你击中＆＃34; 1200px＆＃34;这会改变＆＃34; span4＆＃34;的宽度。元素从300px到370px。

所以在你的CSS中你可以添加一个规则，以便＆＃34; span4＆＃34;元素保持在300px宽度。

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

当你越过1200宽度阈值时，它会使缩略图3保持对齐。

小提琴：

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

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

1 个答案: