टेक्स्ट बॉक्स और बटन को संरेखित करना, बूटस्ट्रैप

Question

मेरे पास निम्न समस्या बूटस्ट्रैप-स्टाइल टेक्स्ट फ़ील्ड और इनपुट बटन के साथ कई बार होती है। ध्यान दें कि वे खड़ी गठबंधन नहीं कर रहे हैं:

मैं इन दोनों तत्वों कैसे संरेखित करते हैं? यहां HTML है:

<div class="span6"> 
    <input type="text" placeholder="email"> <button type="button" class="btn btn-info">Sign up</button> 
</div> 

Answer 1

इसे पूरा करने के लिए, आपको उचित Twitter Bootstrap classes for forms का उपयोग करना होगा।

इस मामले में, यह .form-inline वर्ग है।

<form class="form-inline"> 
    <input type="text" class="input-small" placeholder="Email"/> 
    <button type="submit" class="btn">Sign in</button> 
</form> 

यहाँ डेमो http://jsfiddle.net/YpXvT/42/

Answer 2

<div class="navbar-form pull-left"> 
    <input type="text" class="span2"> 
    <button class="btn">Sign up</button> 
</div> 

http://twitter.github.io/bootstrap/components.html#navbar

या

<div class="input-append"> 
    <input type="text"/> 
    <button class="btn">Sign up</button> 
</div> 

या से नकल:

यहाँ उचित मार्कअप है वर्ग के लिए

<div class="form-horizontal"> 
    <input type="text"/> 
    <button class="btn">Sign up</button> 
</div> 

Answer 3

<div class="input-group"> 
     <input type="email" class="form-control" required="required" placeholder="monEmail@domaine.fr"> 
     <span class="input-group-btn"> 
      <button class="btn btn-default" type="submit"><i class="fa fa-send"></i></button> 
     </span> 
    </div> 

परिवर्तन सीएसएस बूटस्ट्रैप मिनट में इनपुट-समूह-btn: ऊर्ध्वाधर- align => शीर्ष यह है मेरे लिए काम

की