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

Question

में इनपुट-प्रीपेन्ड के साथ इनपुट-ब्लॉक-स्तर का उपयोग करना, मैं सोच रहा हूं कि एक इनपुट फ़ील्ड को इनपुट लेआउट को भरने के लिए ट्विटर बूटस्ट्रैप 2.3.2 में इनपुट-प्रीपेड आइकन के साथ उत्तरदायी लेआउट के साथ कैसे उपलब्ध है?

बूटस्ट्रैप इनपुट-ब्लॉक-स्तर चुड़ैल में एक सीएसएस शैली है जब तक कि आप आइकन के साथ अपना इनपुट प्रीपेड नहीं करते हैं ... प्रीपेड इनपुट के साथ समान कार्यक्षमता कैसे प्राप्त करें? आप के लिए border रंग जोड़ सकते हैं http://jsfiddle.net/r3CyL/

Answer 1

आप थोड़ा अतिरिक्त सीएसएस jsFiddle

.input-prepend.input-block-level { 
    display: table; 
} 
.input-prepend.input-block-level .add-on { 
    display: table-cell; 
} 
.input-prepend.input-block-level > input { 
    width: 100%; 
} 

डेमो जोड़ने की जरूरत:

<div class="control-group"> 
    <label class="control-label" for="inputIcon">Email address</label> 
    <div class="controls"> 
    <div class="input-prepend "> 
     <span class="add-on"><i class="icon-envelope"></i></span> 
     <input class="span2" id="inputIcon" type="text" class="input-block-level"> 
    </div> 
    </div> 
</div> 
<div class="control-group"> 
    <label class="control-label" for="inputPassword">Password</label> 
    <div class="controls"> 
     <input type="password" id="inputPassword" placeholder="Password" class="input-block-level"> 
    </div> 
</div> 

यहाँ इस समस्या को दर्शाता हुआ कोड का उदाहरण है input-prepend.input-block-level .add-on { इसकी उपस्थिति में सुधार करने के लिए।

input-prepend.input-block-level .add-on { 
    display: table-cell; 
    border-right: #fff; 
} 

यह कर का एक और अधिक शामिल रास्ता

संपादित। यह बूटस्ट्रैप भी स्वीकृत है।

डेमो jsFiddle

.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 */ 
    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; 
}