उत्तरदायी ट्विटर बूटस्ट्रैप

Question

का उपयोग कर क्षैतिज रूप को ओवरलैप करने वाली सामग्री के साथ समस्या मैंने इस बेवकूफ बग को ठीक करने का प्रयास करने से पहले अधिक समय बिताया है। मेरे पास एक ऐसा फॉर्म है जो कुछ सामग्री के बाईं ओर प्रदर्शित होता है। यह एक विस्तृत और संकीर्ण स्क्रीन पर ठीक दिखता है, लेकिन टैबलेट चौड़ाई पर (यह 770 और 950 या उससे अधिक के बीच ओवरले करता है) दाईं ओर की सामग्री फॉर्म फ़ील्ड ओवरलैप करती है।

क्या मुझे ट्विटर बूटस्ट्रैप का सही उपयोग करने के लिए मेरे मार्कअप में कुछ याद आ रहा है या क्या मुझे इसे ठीक करने के लिए ब्रेकपॉइंट्स का उपयोग करके कुछ कस्टम शैलियों को जोड़ने की आवश्यकता है? ऐसा प्रतीत होता है कि निश्चित पिक्सेल चौड़ाई बूटस्ट्रैप.css में परिभाषित समस्या उत्पन्न कर रही है। क्या इन चौड़ाई गुणों का उपयोग% से नहीं करना चाहिए क्योंकि मैं द्रव प्रतिक्रियाशील लेआउट का उपयोग कर रहा हूं?

<div class="container-narrow"> 
    <div class="content"> 
    <div class="row-fluid"> 
     <div class="span5"> 
     <form class="form-horizontal" id="applies-Step1-form" action="/" method="post"> 
      <div class="control-group"> 
      <label class="control-label required" for="Step1_email">Email <span class="required">*</span></label> 
      <div class="controls"> 
       <input size="60" maxlength="255" name="Step1[email]" id="Step1_email" type="text" /> 
      </div> 
      </div> 

      <div class="control-group"> 
      <label class="control-label required" for="Step1_home_zip">Home Zip <span class="required">*</span></label> 
      <div class="controls"> 
       <input size="5" maxlength="5" name="Step1[home_zip]" id="Step1_home_zip" type="text" /> 
      </div> 
      </div> 
     </form> 
     </div> 

     <div class="span7"> 
     <div class="promo-btm"> 
      <h2>Heading 2</h2> 
      <ul class="checks"> 
      <li>Bullet One</li> 
      <li>Bullet Two</li> 
      </ul> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

बग के लिए संलग्न स्क्रीनशॉट देखें या आप इसे अपने आप को मेरी fiddle का उपयोग कर पुन: पेश कर सकते हैं।

अगर कोई इसे ठीक करने के तरीके को इंगित करने में मदद कर सकता है तो मैं बेहद सराहना करता हूं!

Answer 1

बस अपने इनपुट तत्वों की चौड़ाई जोड़ें ताकि वे आपके सभी स्क्रीन आकारों के साथ उत्तरदायी रूप से अनुकूलित हो सकें। आप अपने इनपुट तत्वों पर एक चौड़ाई के रूप में .span12 की तरह कुछ का उपयोग कर सकते हैं और उस मुद्दे को ठीक करना चाहिए:

एचटीएमएल

<div class="container-narrow"> 
    <div class="content"> 
    <div class="row-fluid"> 
     <div class="span5"> 
     <form class="form-horizontal" id="applies-Step1-form" action="/" method="post"> 
      <div class="control-group"> 
      <label class="control-label required" for="Step1_email">Email <span class="required">*</span></label> 
      <div class="controls"> 
       <input class="span12" size="60" maxlength="255" name="Step1[email]" id="Step1_email" type="text" /> 
      </div> 
      </div> 

      <div class="control-group"> 
      <label class="control-label required" for="Step1_home_zip">Home Zip <span class="required">*</span></label> 
      <div class="controls"> 
       <input class="span12" size="5" maxlength="5" name="Step1[home_zip]" id="Step1_home_zip" type="text" /> 
      </div> 
      </div> 
     </form> 
     </div> 

     <div class="span7"> 
     <h2>Heading 2</h2> 
     <ul class="checks"> 
      <li>Bullet One</li> 
     </ul> 
     </div> 
    </div> 
    </div> 
</div> 

डेमो: http://jsfiddle.net/yR7Ap/18/

Answer 2

आपका फॉर्म .span5 कॉलम के लिए बहुत व्यापक है। इस ऊपर जोड़ने का प्रयास करें:

<div class="row-fluid"> 
    <div class="span5">hello</div> 
    <div class="span7">world</div> 
</div> 

और निम्न शैली को जोड़ने:

.row-fluid > div { outline: 5px solid green; } 

और आप देखेंगे कि मैं क्या मतलब है।

Answer 3

अन्य पदों के मूल कारण का पता लगाया है समस्या यह है कि आपका फॉर्म span5 div के लिए डिफ़ॉल्ट बूटस्ट्रैप सीएसएस

के साथ बहुत व्यापक है, हालांकि इसे फिट करना मुश्किल नहीं है। अगर यह मदद करता है देखें: http://jsfiddle.net/panchroma/FXXaZ/

मैं इस सीएसएस के साथ अपने फार्म को कड़ा कर दिया है:

/* pull control label left */ 
.form-horizontal .control-label { 
width:70px; /* default 160 */ 
} 

/* pull input box left */ 
.form-horizontal .controls { 
margin-left: 90px; /* defaul 180 */ 
} 

/* shorten input box */ 
input, textarea, .uneditable-input { 
width: 180px; /* default 206 */ 
} 

गुड लक!