ट्विटर बूटस्ट्रैप

Question

के साथ मिलान करने वाली चौड़ाई के लिए संलग्न/प्रीपेड के साथ इनपुट कैसे प्राप्त करें, क्या इनपुट करने के लिए कोई तरीका है जो मिलान करने वाली चौड़ाई वाले सभी को जोड़ना और/या प्रीपेन्ड करना है?

यहां एक उदाहरण है, लेकिन आप देख सकते हैं कि विभिन्न लंबाई के परिशिष्ट/प्रीपेड के साथ कई इनपुट दिए गए हैं, सभी अलग-अलग चौड़ाई के अंत में होंगे, और यह बहुत अच्छा नहीं लगेगा।

http://jsfiddle.net/PLkfq/1/

Answer 1

आप, पिक्सेल सटीक होना कक्षाएं भूल जाते हैं और आईडीएस

मिनट अवधि

<span id="minutes" class="add-on">minutes</span> 

एक आईडी जोड़ सकते हैं और सीएसएस

के इस बिट का उपयोग करने शैली लागू करना चाहते हैं

#service_name{width:200px;} 
#service_duration{width:130px;} 
#minutes{width:70px;} 

http://jsfiddle.net/baptme/PLkfq/4/

Answer 2

आप jQuery का उपयोग कर सकते हैं: इस विधि द्वारा

$(document).ready(function(){ 
var normal_width = $("#service_name").width(); 
var add_on = $(".add-on").width(); 
var after_width = normal_width-add_on+3; 
$("#service_duration").width(after_width); 
}); 

आप अपने इनपुट के लिए किसी भी आकार सेट कर सकते हैं

http://jsfiddle.net/PLkfq/25/

Answer 3

के बजाय संलग्न इनपुट पर वर्ग span1 को परिभाषित करने, इनपुट का उपयोग करके देखें -medium। इनपुट चौड़ाई एक समान होगी लेकिन संलग्न लेबल सामग्री आकार के साथ अलग-अलग होगा जो ठीक लगता है। यदि आपको यह पसंद नहीं है, तो आप उन्हें एक ही आकार के लिए ऐड-ऑन क्लास पर एक न्यूनतम-चौड़ाई सेट कर सकते हैं।

http://jsfiddle.net/PLkfq/40/

<div class="container-fluid"> 
<div class="span12"> 
    <div class="row-fluid"> 
     <form class="form-horizontal"> 
      <fieldset> 

       <div class="control-group string required"> 
       <label class="string required control-label" for="service_name"> 
        <abbr title="required">*</abbr> Service name</label> 
        <div class="controls"> 
        <input class="string required" id="service_name" name="service[name]" size="50" type="text"> 
        </div> 
       </div> 

       <div class="control-group integer required"> 
       <label class="integer required control-label" for="service_duration"> 
        <abbr title="required">*</abbr> Duration</label> 
        <div class="controls"> 
        <div class="input-append"> 
         <input class="numeric integer required input-medium" id="service_duration" name="service[duration]" type="text"><span class="add-on">minutes</span> 
        </div> 
        </div> 
       </div> 
        <div class="control-group integer required"> 
       <label class="integer required control-label" for="service_sec"> 
        <abbr title="required">*</abbr> Seconds</label> 
        <div class="controls"> 
        <div class="input-append"> 
         <input class="numeric integer required input-medium" id="service_sec" name="service[sec]" type="text"><span class="add-on">sec</span> 
        </div> 
        </div> 
       </div> 
      </fieldset> 
     </form> 
    </div> 
</div>