मैं .form-inline के साथ .input-append का उपयोग कैसे कर सकता हूं?

Question

मैं ट्विटर बूटस्ट्रैप में नया हूं और इसके उपयोग के माध्यम से अपना रास्ता खराब करना शुरू कर रहा हूं। जबकि ढांचे के कुछ पहलुओं को समझना शुरू हो रहा है, फिर भी मैं स्टाइल स्टाइल के साथ संघर्ष कर रहा हूं। मैं एक फॉर्म के कई अलग-अलग वर्गों को स्थापित करने की कोशिश कर रहा हूं जिसमें .form-inline का उपयोग करने वाले स्टाइल होंगे। इस तरह के एक उदाहरण में मैं थोड़ी किस्मत के साथ .input-append का उपयोग करने का भी प्रयास कर रहा हूं।

<div class="row"> 
    <div class="well span12"> 
     <div class="row"> 
      <div class="span12 form-inline input-append"> 
       <label for="assetSearch">Asset Search</label> 
       <input type="search" id="assetSearch" placeholder=""> 
       <span class="add-on"><i class="icon-search"></i></span> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="span12 form-inline"> 
       <label for="service">Service</label> 
       <input type="text" id="service" autocomplete="off" /> 
      </div> 
     </div> 
    </div> 
</div> 

ऊपर मार्कअप इस तरह प्रस्तुत करता है:

आप "संपत्ति खोज" को देखने के रूप में इनपुट के अनुरूप नहीं है सकते हैं। यदि मैं div div चीजों को लाइन से .input-append वर्ग हटा देता हूं। हालांकि, खोज आइकन अब टेक्स्ट बॉक्स में एम्बेड नहीं किया गया है, बल्कि टेक्स्ट बॉक्स के दाईं ओर।

.input-append के साथ संयोग में .form-inline का उपयोग कैसे कर सकता हूं? http://jsfiddle.net/Jeff_Meadows/xGRtL/

दो फिक्स वर्ग .input-append के तत्वों के अंदर <label> की vertical-align तत्वों सेट करने के लिए, और 14px करने के लिए अपने तत्व के font-size पुनर्स्थापित करने के लिए कर रहे हैं (इसे कहीं और में 0 पर सेट है:

Answer 1

आप input रों, button या .add-on रों की तुलना में और एक input-append (या आगे जोड़ते) कुछ भी अंदर नहीं डाल चाहिए (इस संपूर्ण नहीं हो सकता है)।

एक div.input-append में पूरी बात लपेटकर कोशिश करो और .form-inline चल संभालने दें: Demo on jsfiddle

<div class="span12 form-inline"> 
    <label for="assetSearch">Asset Search</label> 
    <div class="input-append"> 
     <input type="search" id="assetSearch" placeholder="" /> 
     <span class="add-on"><i class="icon-search"></i></span> 
    </div> 
</div> 

Answer 2

यहाँ काम कर संरेखण के एक बेला है bootstrap)। .input-append पर आधारित नियम बनाने के बजाय, मैंने एक नई कक्षा बनाई है जिसे आप अपने तत्व में जोड़ सकते हैं। इस तरह, आपको कहीं और अप्रत्याशित परिणाम नहीं मिलेगा।

.input-prepend label, .input-append label { 
    vertical-align: middle; 
} 
.fix-text-spacing { 
    font-size: 14px; 
}