Bootstrap Thumbnails vermasselt, wenn große Display-Einstellungen blockiert

Question

Mit Bootstrap 2.3.2 ich die folgende Lösung verwendet, um meine Seite Adaptierungs Einstellungen auf die große Anzeige zu blockieren:

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

... die fein gearbeitet hat bis ich Thumbnails erstellt:

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

drei Thumbnails in einer Reihe Es gibt aber , wenn ich das Browserfenster ziehen, um zu überschreiten 1200px, die Thumbnails neu ordnen, und es gibt nur zwei Zeilen.

Wie kann ich das lösen?

Muss ich all diese bootstrap .span Tags neu definieren?

Das ist meine Geige: https://jsfiddle.net/michi001/b7n1byvx/

Answer 1

Bootstrap hat eine „CSS-Regel“, wenn Sie „1200px“ getroffen, die die Breite „span4“ Elemente von 300px zu 370px ändert.

Also in Ihrem CSS können Sie eine Regel hinzufügen, so dass "span4" -Elemente bei 300px Breite bleiben.

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

Diese Option hält die Thumbnails 3 beim Überschreiten der Breite von 1200 mm horizontal.

Fiddle:

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