बूटस्ट्रैप। तैयार और संलग्न इनपुट। अधिकतम इनपुट फ़ील्ड चौड़ाई कैसे करें?

Question

मैं ट्विटर से बूटस्ट्रैप का उपयोग कर रहा हूं। मैं चाहता हूं कि एक प्रीपेड टेक्स्ट, और इनपुट फ़ील्ड और एक बटन बनाना है, लेकिन मैं चाहता हूं कि मेरे इनपुट फ़ील्ड में अधिकतम उपलब्ध चौड़ाई हो ताकि सबमिट बटन का दायां किनारा कुएं के दाएं किनारे के पास हो। बूटस्ट्रैप दस्तावेज़ीकरण से है। इनपुट-ब्लॉक-स्तर वर्ग जो किसी भी तत्व को ब्लॉक स्तर तत्व की तरह व्यवहार करने देता है, लेकिन इनपुट में इसे लागू करने से केंद्रीय इनपुट अच्छी तरह से आकार का होता है। http://jsfiddle.net/Uc4CE/

<div class="well"> 
<div class="input-prepend input-append"> 
    <span class="add-on">Some text</span> 
    <input class="input" type="text" name="xxx" value="xxx" /> 
    <input type="hidden" name="next" value="xxx" /> 
    <input type="submit" value="xx" class="btn btn-info" /> 
</div> 
</div> 

Answer 1

मैं कुछ इसी तरह की तलाश में गया था और https://gist.github.com/mattjorn/5020957 से इस समाधान के लिए काम किया मुझे - अपने बाहरी div में .input-block-level जोड़ें, उदाहरण के लिए,

<div class="input-prepend input-append input-block-level">

और उसके बाद इस तरह बूटस्ट्रैप सीएसएस का विस्तार:

.input-prepend.input-block-level { 
    display: table; 
    width: 100%; 
} 

.input-prepend.input-block-level .add-on { 
    display: table-cell; 
    background-color: white; 
} 

.input-prepend.input-block-level > input { 
    box-sizing: border-box; 
    height: 30px; 
    display: table-cell; 
    width: 100%; 
    border-left-style: none; 
} 

Answer 2

अपने कोड के लिए div class="input-prepend input-append" अतिरिक्त शैली margin-right

परिणाम के लिए उपयोग हो सकता है:

<div class="well"> 
    <div class="input-prepend input-append" style="margin-right: 108px;"> 
     <span class="add-on">Some text</span> 
     <input class="input-block-level" type="text" name="xxx" value="xxx" /> 
     <input type="hidden" name="next" value="xxx" /> 
     <input type="submit" value="xx" class="btn btn-info" /> 
    </div> 
</div> 

http://jsfiddle.net/Uc4CE/1/

Answer 3

प्रति @mdo's comment on this issue के रूप में ट्विटर बूटस्ट्रैप के 3.0 शाखा में इसके लिए एक ठीक है।

हालांकि, मैं <div class="span4"> के भीतर django-crispy forms लेआउट आउटपुट के दौरान अपनी परियोजनाओं में निम्न जावास्क्रिप्ट का उपयोग करता हूं। यह उत्तरदायी डिजाइन के लिए खाते हैं।

---

उदाहरण एचटीएमएल

<div class="row-fluid"> 
    <div class="span4"> 
     {% crispy form %} 
    </div> 
</div> 

---

style.css

/* I also set this to account for smaller widtsh */ 

form fieldset { 
    width:100% 
} 

---

fix.js

नोट: मैं इसे विंडो रेजिज़िंग के साथ भी ट्रिगर करता हूं।

समारोह sizeInputs() {
वर परिवार कल्याण = $ ('प्रपत्र fieldset') innerWidth()।;
$ ('फॉर्म। इनपुट-प्रीपेन्ड')। प्रत्येक (फ़ंक्शन() { $ (यह) .children ('input')। Css ('width', fw - $ (this) .children ('। Add -ऑन ')। आंतरिकविड्थ());}); };

$ (दस्तावेज़) .ready (function() {sizeInputs();});

$ (विंडो)।आकार बदलें (फ़ंक्शन() {आकार इनपुट();});

Answer 4

संपादित करें: कृपया ध्यान दें कि यह उत्तर बूटस्ट्रैप v2.3.x के लिए मान्य है। बूटस्ट्रैप 3 पहले से ही इस मूल रूप से हल करता है (see doc)।

एक ली के जवाब से प्रेरित होकर, यहाँ मेरी थोड़े बेहतर समाधान (शामिल दोनों संलग्न करें और आगे जोड़ते, न्यूनतम संभव ऐड-ऑन चौड़ाई, हटाया अनावश्यक शैलियों, ऑटो ऊंचाई ...) है। बूटस्ट्रैप सीएसएस/कम फ़ाइलों के बाद इस में शामिल हैं:

.input-append.input-block-level, 
.input-prepend.input-block-level { 
    display: table; 
} 

.input-append.input-block-level .add-on, 
.input-prepend.input-block-level .add-on { 
    display: table-cell; 
    width: 1%; /* remove this if you want default bootstrap button width */ 
} 

.input-append.input-block-level > input, 
.input-prepend.input-block-level > input { 
    box-sizing: border-box; /* use bootstrap mixin or include vendor variants */ 
    -moz-box-sizing: border-box; /* for Firefox */ 
    display: table; /* table-cell is not working well in Chrome for small widths */ 
    min-height: inherit; 
    width: 100%; 
} 

.input-append.input-block-level > input { 
    border-right: 0; 
} 

.input-prepend.input-block-level > input { 
    border-left: 0; 
} 

अपने HTML में इस तरह का प्रयोग करें और याद है, आप a टैग का उपयोग करने इस मामले में अपने बटन के लिए नहीं button है:

<div class="input-append input-block-level"> 
    <input type="text" /> 
    <a class="btn add-on">click</a> 
</div> 

संपादित करें: IE8 में, यदि आप .input-append.input-block-level > input में display: table सेट करते हैं, तो इनपुट टैग फोकस करने के बावजूद अपरिहार्य हो जाता है।

इस display: पैरामीटर को पूरी तरह से छोड़कर यह आईई 8 के साथ-साथ वर्तमान क्रोम/सफारी/फ़ायरफ़ॉक्स में अपेक्षित काम करता है।