बूटस्ट्रैप तरल ग्रिड: आईएस 7

Question

में कंटेनर से इनपुट ब्रेक आउट आईई 7 इनपुट में इसके कंटेनर से क्यों टूट जाता है?

http://jsfiddle.net/Q8jPM/2/

<div class="row-fluid" style="margin-top:10px;"> 
    <div class="span12"> 
     <div class="row-fluid"> 
      <div class="span6"> 
       <div class="row-fluid"> 
        <div class="span6 " style="background:green;"> 
         <input type="text" class="span12"> 
        </div> 
        <div class="span6" style="background:blue;"> 
         <input type="text" class="span12"> 
        </div> 
       </div> 
      </div> 
      <div class="span6"> 
       <div class="row-fluid"> 
        <div class="span6" style="background:green;"> 
         <input type="text" class="span12"> 
        </div> 
        <div class="span6" style="background:blue;"> 
         <input type="text" class="span12"> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

अद्यतन: मैं इसे का पिटारा-मॉडल और चौड़ाई मुद्दा लगता है, लेकिन बूटस्ट्रैप के साथ किसी भी समाधान है?

Answer 1

ऐसा होता है क्योंकि IE7 सीएसएस संपत्ति

box-sizing: border-box; 

कि गद्दी और सीमा आकार पर विचार करता तत्वों के हिस्से के रूप चौड़ाई का समर्थन नहीं करता। - माता-पिता चौड़ाई से अधिक http://paulirish.com/2012/box-sizing-border-box-ftw/

इस वजह से

, IE7 इनपुट चौड़ाई को गद्दी और सीमा आकार जोड़ता है:

इस संपत्ति के बारे में यहाँ और अधिक पढ़ें। तत्व को मूल आकार में फिट करने और तरल पदार्थ रहने के लिए उन्हें 0 पर सेट करना होगा।

आप इनपुट के चारों ओर एक रैपर तत्व जोड़ने और फिर पैडिंग और सीमा को रैपर पर सेट करने का प्रयास कर सकते हैं। यह सभी ब्राउज़रों में काम करेगा

Answer 2

मुझे एक समान समस्या थी। मैं आप निश्चित रूप से इनपुट-छोटे या जो कुछ भी सूट इस्तेमाल कर सकते हैं

class="span3" 

जगह

class="input-mini" 

साथ द्वारा यह संकल्प लिया। चूंकि आप अपने इनपुट के लिए span12 की तलाश में थे, मैं सुझाव देता हूं कि "इनपुट-xxlarge"