स्पैन के साथ ट्विटर बूटस्ट्रैप पंक्ति

Question

ट्विटर बूटस्ट्रैप का उपयोग करके, मैं यह पता लगाने की कोशिश कर रहा हूं कि आखिरी "कॉलम" क्यों लपेटता है।

<div class="row span4 solidBottom"> 
     <div class="span1"> 
      <label>A</label> 
     </div> 
     <div class="span1"> 
      <label>B</label> 
     </div> 
     <div class="span1"> 
      <label>C</label> 
     </div> 
     <div class="span1"> 
      <label>D</label> 
     </div> 
</div> 

यह परिणाम: क्यों यह लपेटता के रूप में

A B C 
D 
___________ 

SPAN 4 = 300px 
Four Span1s = 240 
3 Paddings = 60 
240 + 60 = 300 

इसलिए किसी भी सुराग?

मैं बहु कॉलम फॉर्म बनाने की कोशिश कर रहा हूं और कॉलम और पंक्तियों को व्यवस्थित रखना चाहता हूं।

धन्यवाद।

संपादित करें: पंक्ति में style="width:auto" जोड़ना समस्या हल करता है, लेकिन 300px डिफ़ॉल्ट चौड़ाई क्यों लपेटती है?

Answer 1

आप सही हैं कि span4 300px है, लेकिन मेरा मानना ​​है कि आपके HTML में कोई त्रुटि है।

आपको अपने नेस्टेड कॉलम को एक नई .row कक्षा में लपेटने की आवश्यकता है। जब आप ऐसा करते हैं तो रैपिंग बंद हो जाती है। http://jsfiddle.net/panchroma/UBTv4/ देखें और उदाहरण के लिए डिफ़ॉल्ट (गैर तरल पदार्थ) बूटस्ट्रैप ग्रिड का उपयोग करें।

<div class="container"> 

<div class="row"> 
    <div class="span4 solidBottom"> 

     <div class="row"> 
      <div class="span1"> 
       <label>A</label> 
      </div> 

      <div class="span1"> 
       <label>B</label> 
      </div> 

      <div class="span1"> 
       <label>C</label> 
      </div> 

      <div class="span1"> 
       <label>D</label> 
      </div> 

     </div> <!-- end nested row --> 

     <div class="span8"> </div> 

    </div> <!-- end parent row --> 
</div> <!-- end container --> 

तय ग्रिड के लिए, नेस्टेड पंक्ति में स्तंभों की संख्या इस मामले में माता-पिता के कॉलम में colums (यानी चार की संख्या में जुड़ने चाहिए:

यह HTML मैं का उपयोग किया है है)

आप तरल पदार्थ ग्रिड उपयोग कर रहे हैं (यानी पंक्ति-द्रव), नेस्टेड पंक्ति में स्तंभों की संख्या 12.