Bootstrap thumbnails messed up when blocking large display settings

Question

Using Bootstrap 2.3.2 I used the following solution to block my page adapting to the large display settings:

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

... which has been working fine until I created thumbnails:

<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>

There are three thumbnails in a row, but when I pull the browser window to exceed 1200px, the thumbnails re-arrange and there are only two by row.

How can I solve this?

Do I need to redefine all those bootstrap .span tags?

This is my fiddle: https://jsfiddle.net/michi001/b7n1byvx/

Answer 1

Bootstrap has a "CSS" rule once you hit "1200px" that changes the width of "span4" elements from 300px to 370px.

So in your css you can add a rule so that "span4" elements stay at the 300px width.

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

Which keeps the thumbnails 3 across as you cross the 1200 width threshold.

Fiddle:

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