बूटस्ट्रैप थंबनेल में गड़बड़ जब बड़े प्रदर्शन सेटिंग्स

Question

अवरुद्ध बूटस्ट्रैप 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 टैग को फिर से परिभाषित करने की आवश्यकता है? एक बार आप "1200px" कि 300px से 370px करने के लिए "span4" तत्वों की चौड़ाई में परिवर्तन मारा https://jsfiddle.net/michi001/b7n1byvx/

Answer 1

बूटस्ट्रैप एक "CSS" नियम है:

यह मेरा बेला है।

तो अपने सीएसएस में आप एक नियम जोड़ सकते हैं ताकि "span4" तत्व 300px चौड़ाई पर बने रहें।

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

जो 1200 चौड़ाई सीमा पार करते समय थंबनेल 3 को रखता है।

फिडल:

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