जंबोट्रॉन कंटेनर

Question

का उपयोग कर बूटस्ट्रैप 3 में इनपुट से इनपुट इनपुट समूह बूटस्ट्रैप 3 इनपुट समूहों के साथ एक अजीब व्यवहार का प्रयोग कर रहा हूं। जब मैं एक jumbotron के अंदर एक फॉर्म में इनपुट-समूह-एडन (टेक्स्ट या आइकन) जोड़ता हूं, तो इनपुट-समूह ऊंचाई इसकी इनपुट ऊंचाई से बड़ी होती है।

यहाँ

आप एक JsFiddle और समस्या के साथ एक स्क्रीनशॉट पा सकते हैं: पर http://jsfiddle.net/DTcHh/

स्क्रीनशॉट

<div class="jumbotron"> 
    <h1>Jumbotron with form</h1> 
     <form> 
      <div class="input-group"> 
       <input type="text" class="form-control" placeholder="Username"> 
        <span class="input-group-addon">@</span> 
      </div> 
     </form> 
    </div> 

लाइव उदाहरण:

मैं इस समस्या का समाधान कैसे कर सकते हैं? मैं बूटस्ट्रैप समाधान की तलाश में हूं लेकिन अगर यह संभव नहीं है तो अच्छा होगा अगर आप इसे सीएसएस नियमों के साथ ठीक करने में मेरी मदद कर सकते हैं।

Answer 1

बूटस्ट्रैप समाधान युक्त <div> पर input-group-lg वर्ग को जोड़ने के लिए है - shown in the documentation के रूप में है, लेकिन आप ध्यान देंगे एडऑन अभी भी इनपुट तुलना में थोड़ा बड़ा है, इसलिए आप बस <input> मैच के लिए की ऊंचाई को समायोजित कर सकते हैं; मैं 5 पिक्सल कहा:

http://jsfiddle.net/DTcHh/21/

Answer 2

बूटस्ट्रैप के दस्तावेज़ को देखते हुए के रूप में Adrift पता चलता है, अपने मूल कोड पूरी तरह से वैध लग रहा है। यदि आप बड़ा चाहते हैं तो इनपुट-समूह-एलजी कक्षा जोड़ना बहुत अच्छा है, लेकिन यदि आप नहीं करते हैं, तो यह गलत है। आईई 9 का उपयोग करके और अपने कोड को अपने स्वयं के देव पर्यावरण और एड्रिफ्ट के जेएसफ़ील्ड दोनों में चलाते हुए, यह इनपुट-ग्रुप-एलजी कक्षा के साथ और बिना सही तरीके से (मेरे लिए) काम कर रहा है, बेशक इसके साथ ही इसे बड़ा प्रदान किया जाता है। शायद एक ब्राउज़र विशिष्ट मुद्दा ??

उस ने कहा, मुझे एक चुनिंदा विकर के सामने एक रेडियो बटन जोड़ने की कोशिश करने में एक ही समस्या का सामना करना पड़ रहा है। ओह अच्छा ...

Answer 3

.jumbotron भीतर .input-group-addon आकार की मुख्य समस्या यह है कि यह विरासत में font-size.jumbotron की है।

आमतौर पर, लोगों को ऊंचाई, न्यूनतम ऊंचाई या गद्दी आदि बदलने के लिए कोशिश कर रहे हैं

हालांकि विभिन्न आकार के कारण है कि .jumbotron में .input-group विरासत "font-size: 21px;"

आप font-size बदलना चाहिए है .input-group.input-group-addon नीचे की तरह।

.input-group { font-size: 14px !important; } 

Answer 4

कल रात, मुझे बिल्कुल वही समस्या थी। उपरोक्त वर्णित कोई भी फिक्स्ड मेरे संदर्भ में काम नहीं करता है। क्या अंत में काम करने के लिए किया था 0 पर मार्जिन की स्थापना था:

.input-group .form-control { 
    margin: 0px !important; 
} 

शायद यह एक ऐसी ही समस्या के साथ किसी मदद करता है!

<div class="input-group input-group-lg"> 
    <input type="text" class="form-control" placeholder="Username"/> 
    <span class="input-group-btn"> 
     <button id="search_button" class="btn btn-primary" type="button">GO</button> 
    </span> 
</div> 

मैं तो मेरे बटन के लिए निम्न शैली लागू:

#search_button { 
    width: 90px; 
    margin: 0 auto; 
    text-align: justify; 
} 

सब है कि

Answer 5

मैं इसे अपने बटन को id="search_button" जोड़ने तय की।

Answer 6

इनपुट को बड़ा बनाने के बजाय, अवधि (इनपुट-समूह-एडन) को छोटा करें। ऐसा करने के लिए, अपने पैडिंग को कम करें। तो:

.input-group-addon { 
    padding: 0px 6px; 
}