बूटस्ट्रैप: बटन के साथ संरेखित इनपुट

Question

बूटस्ट्रैप में बटन और इनपुट अच्छे से संरेखित क्यों नहीं होते हैं?

मैंने कुछ सरल करने की कोशिश की जैसे:

<input type="text"/><button class="btn">button</button>

बटन 5pxक्रोम / फ़ायरफ़ॉक्स में इनपुट की तुलना में कम है।

Answer 1

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

ट्विटर बूटस्ट्रैप 4 में, इनपुट और बटन को कक्षाओं input-group-prependऔर input-group-appendकक्षाओं का उपयोग करके संरेखित किया जा सकता है ( https://getbootstrap.com/docs/4.0/compenders/input-group/#button-addons देखें )

बाईं ओर समूह बटन (पूर्व-संकेत)

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
  <input type="text" class="form-control">
</div>

दाईं ओर समूह बटन (परिशिष्ट)

<div class="input-group mb-3">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
  <input type="text" class="form-control">
</div>

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

जैसा कि @abimelex द्वारा उत्तर में दिखाया गया है, इनपुट और बटन .input-groupकक्षाओं का उपयोग करके संरेखित किया जा सकता है (देखें http://getbootstrap.com/compenders/#input-groups-buttons )

बाईं ओर समूह बटन

<div class="input-group">
  <span class="input-group-btn">
    <button class="btn btn-default" type="button">Go!</button>
  </span>
  <input type="text" class="form-control">
</div>

दाईं ओर समूह बटन

<div class="input-group">
   <input type="text" class="form-control">
   <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
   </span>
</div>

यह समाधान मेरे उत्तर को अद्यतित रखने के लिए जोड़ा गया है, लेकिन कृपया @abimelex द्वारा उपलब्ध कराए गए उत्तर पर अपना वोट डाल दें ।

---

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

बूटस्ट्रैप एक .input-appendवर्ग प्रदान करता है, जो एक आवरण तत्व के रूप में काम करता है और आपके लिए इसे सही करता है:

<div class="input-append">
    <input name="search" id="search"/>
    <button class="btn">button</button>
</div>

जैसा कि @OleksiyKhilkevich ने अपने उत्तर में बताया, संरेखित करने inputऔर कक्षा buttonका उपयोग करने का एक दूसरा तरीका है .form-horizontal:

<div class="form-horizontal">
    <input name="search" id="search"/>
    <button class="btn">button</button>
</div>

अंतर

इन दो वर्गों के बीच का अंतर यह है कि तत्व के खिलाफ .input-appendजगह होगी (इसलिए वे जैसे लग रहे हैं कि वे संलग्न हैं), उनके बीच एक जगह कहां होगी।buttoninput.form-horizontal

-- ध्यान दें --

रिक्ति के बिना तत्वों inputऔर buttonतत्वों को एक दूसरे के बगल में होने की अनुमति देने के लिए , वर्ग में font-sizeसेट किया गया है (यह तत्वों के बीच सफेद रिक्ति को हटाता है )। यह तत्व में फ़ॉन्ट-आकार पर प्रतिकूल प्रभाव डाल सकता है यदि आप चूक या माप का उपयोग करके चूक को ओवरराइड करना चाहते हैं ।0.input-appendinline-blockinputem%

Comments

आपके उत्तर के लिए धन्यवाद, लेकिन मुझे लगता है कि यहां कुछ गलत हो रहा है। निश्चित रूप से मैं ऐसा पहला व्यक्ति नहीं हूं जो यह चाहता है कि बूटस्ट्रैप घटक फार्म तत्वों के साथ पंक्तिबद्ध हों।

— पगडियारियो

@pguardiario - आप पूरी तरह से सही हैं। यह गलत प्रतीत हुआ और मेरे दिमाग को थप्पड़ मारने के बाद मुझे .input-appendकक्षा याद आ गई ।

— माई हेड हर्ट्स

यह अजीब लगता है कि ऐसा करने के लिए आपको एक रैपर क्लास की आवश्यकता होगी। क्या उन्हें डिफ़ॉल्ट रूप से लाइन में नहीं लगना चाहिए?

— opsb

@ पुलिस अगर वे उतनी ही खड़ी जगह लेते हैं तो हां करेंगे। हालांकि ट्विटर बूटस्ट्रैप में इनपुट फ़ील्ड्स हैं, margin-bottom: 9pxलेकिन बटन ऐसा नहीं है, इसलिए वे समान ऊर्ध्वाधर स्थान नहीं लेते हैं। चूंकि दोनों तत्वों में एक middleऊर्ध्वाधर संरेखण है, अंतर के कारण बटन ऑफसेट है। .input-appendआवरण का उपयोग करने से यह मार्जिन-निचला मान निकाल देता है।

— माई हेड हर्ट्स

ठीक है, मुझे लगता है कि यदि वे डिफ़ॉल्ट रूप से एक ही ऊर्ध्वाधर ऊंचाई रखते थे, तो यह अन्य फॉर्म लेआउट को तोड़ देगा।

— opsb

Answer 2

आप इनपुट-फ़ील्ड बटन प्रॉपर्टी का उपयोग इनपुट-फ़ील्ड पर सीधे बटन लागू करने के लिए कर सकते हैं।

बूटस्ट्रैप 3 और 4

<div class="input-group">
  <input type="text" class="form-control">
  <span class="input-group-btn">
    <button class="btn btn-default" type="button">Go!</button>
  </span>
</div><!-- /input-group -->

कई और उदाहरणों के लिए बीएस 4 इनपुट-ग्रुप डॉक्टर पर एक नज़र डालें ।

Comments

अन्य लोगों ने मेरे लिए काम नहीं किया, इसने हालांकि ऐसा किया, जिस तरह से मैं चाहता था। धन्यवाद।

— कोलंडस

मेरे लिए यह तब काम नहीं आया जब कक्षा को आवंटित करने के लिए एक अतिरिक्त स्पैन टैग बनाया गया, लेकिन यह काम किया अगर मैंने उस वर्ग को div टैग में जोड़ दिया:<div class="form-group input-group-btn">

— J0ANMM

यह उत्तर बीएस 4 के लिए पुराना है, मेरे उत्तर पर एक नज़र डालें।

— अलेक्जेंडर किम

Answer 3

बस सिर ऊपर, इस कहा जाता है के लिए विशेष सीएसएस वर्ग लगता है form-horizontal

इनपुट-एपेंड का एक और दुष्प्रभाव है, कि यह फ़ॉन्ट-आकार को शून्य तक गिरा देता है

Comments

+1 अच्छा स्थान - मुझे इस बात पर ध्यान देना था कि उन्होंने font-size: 0कुछ नया क्यों सीखा और सीखा :) धन्यवाद!

— माई हेड हर्ट्स

Answer 4

उपयोग .form-inline = यह एक कॉम्पैक्ट लेआउट के लिए लेबल और इनलाइन-ब्लॉक नियंत्रणों को छोड़ देगा

उदाहरण: http://jsfiddle.net/hSuy4/292/

<div class="form-inline">
<input type="text">
<input type="button" class="btn" value="submit">
</div>

.form-क्षैतिज = सही संरेखित लेबल और उन्हें बाईं ओर फ्लोट करने के लिए उन्हें उसी पंक्ति पर दिखाई देता है जैसे नियंत्रण जो कि 2% स्वरूप लेआउट के लिए बेहतर है।

(e.g. 
Label 1: [textbox]
Label 2: [textbox]
     : [button]
)

उदाहरण: http://twitter.github.io/bootstrap/base-css.html#forms

Comments

मैं पुष्टि कर सकता हूं कि form-inlineबूटस्ट्रैप 3 के लिए काम करता है। धन्यवाद।

— ऑस्टिन

बहुत खुबस! वास्तव में एक परेशानी भरे रूप के लिए मुझे क्या चाहिए!

— इसका_नोटजैक

ऐसा लगता है कि .form-इनलाइन केवल व्यूपोर्ट्स के भीतर कम से कम 768px चौड़े काम करता है: w3schools.com/bootstrap/bootstrap_forms.asp

— anemaria20

Answer 5

मैंने सभी के ऊपर प्रयास किया और कुछ परिवर्तनों के साथ अंत किया, जिन्हें मैं साझा करना चाहूंगा। यहां वह कोड है जो मेरे लिए काम करता है (संलग्न स्क्रीनशॉट ढूंढें):

<div class="input-group">
    <input type="text" class="form-control" placeholder="Search text">
    <span class="input-group-btn" style="width:0;">
        <button class="btn btn-default" type="button">Go!</button>
    </span>
</div>

यदि आप इसे काम करते देखना चाहते हैं, तो बस नीचे दिए गए कोड का आप संपादक में उपयोग करें:

<html>
    <head>
        <link type='text/css' rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css' />
    </head>
    <body>
        <div class="container body-content">
            <div class="form-horizontal">
              <div class="input-group">
                  <input type="text" class="form-control" placeholder="Search text">
                  <span class="input-group-btn" style="width:0;">
                      <button class="btn btn-default" type="button">Go!</button>
                  </span>
              </div>
            </div>
        </div>
    </body>
</html>

उम्मीद है की यह मदद करेगा।

Comments

यह किस बूटस्ट्रैप संस्करण के लिए है? और किस समस्या के कारण इसका उपयोग नहीं किया जाता है style="width:0;"?

— कार्ल एडलर

यदि आप चौड़ाई का उपयोग नहीं करते हैं: तो यह पृष्ठ की पूरी चौड़ाई लेगा।

— अभिमन्यु

बूटस्ट्रैप रास्ता एक को-एलिमेंट के साथ लिपटना होगा जैसे इसके लिए <div class="col-md-4">कोई ज़रूरत नहीं हैwidth: 0

— कार्ल एडलर

मैं सेट करता हूं क्योंकि मैं स्क्रीन की पूरी चौड़ाई लेने के लिए इनपुट नियंत्रण नहीं चाहता

— अभिमन्यु

Answer 6

मैं भी इसी मुद्दे से जूझ रहा था। मेरे द्वारा उपयोग की जाने वाली बूटस्ट्रैप कक्षाएं मेरे लिए काम नहीं कर रही हैं। मैं नीचे के रूप में एक वर्कअराउंड के साथ आया:

<form action='...' method='POST' class='form-group'>
  <div class="form-horizontal">
    <input type="text" name="..." 
        class="form-control" 
        placeholder="Search People..."
        style="width:280px;max-width:280px;display:inline-block"/>

    <button type="submit" 
        class="btn btn-primary" 
        style="margin-left:-8px;margin-top:-2px;min-height:36px;">
      <i class="glyphicon glyphicon-search"></i>
     </button>
  </div>
</form>

मूल रूप से, मैं वर्ग "फॉर्म-कंट्रोल" की प्रदर्शन संपत्ति को ओवररोड करता हूं, और आकार और स्थिति को सही करने के लिए अन्य शैली गुणों का उपयोग करता हूं।

निम्नलिखित परिणाम है:

Answer 7

बूटस्ट्रैप 4:

<div class="input-group">
  <input type="text" class="form-control">
  <div class="input-group-append">
    <button class="btn btn-success" type="button">Button</button>
  </div>
</div>

https://getbootstrap.com/docs/4.0/components/input-group/

Answer 8

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

Answer 9

मैंने उपरोक्त सभी कोड आज़माए और उनमें से किसी ने भी मेरे मुद्दे तय नहीं किए। यहाँ मेरे लिए क्या काम किया है। मैंने इनपुट-ग्रुप-एडऑन का उपयोग किया।

<div class = "input-group">
  <span class = "input-group-addon">Go</span>
  <input type = "text" class = "form-control" placeholder="you are the man!">
</div>

Answer 10

सीधे तौर पर संबंधित नहीं, जब तक कि आपके पास समान कोड न हो, लेकिन मैंने अभी-अभी इन-लाइन, बूटस्ट्रैप 3.3.7 के लिए एक अजीब व्यवहार देखा

मैंने इसके लिए पंक्ति और कक्षों का उपयोग नहीं किया, क्योंकि यह एक डेस्कटॉप प्रोजेक्ट है, यदि ओपनिंग टैग टेबल से नीचे था (इस मामले में):

<table class="form-inline"> 
<form> 
<tr>

फार्म तत्व ढेर हो जाएगा।

स्विच करें और इसे ठीक से पंक्तिबद्ध करें।

<form>
<table class="form-inline">
<tr>

सफारी 10.0.2 और नवीनतम क्रोम में कोई अंतर नहीं था। शायद मेरा लेआउट गलत था लेकिन यह बहुत क्षमाशील नहीं है।

Answer 11

इनपुट फ्लोट को बायीं ओर ले जाएं। फिर बटन ले लो और इसे सही फ्लोट करें। जब आप एक से अधिक दूरी तय करते हैं, तो आप कक्षा को स्पष्ट कर सकते हैं।

<input style="width:65%;float:left"class="btn btn-primary" type="text" name="name"> 
<div style="width:8%;float:left">&nbsp;</div>
<button class="btn btn-default" type="button">Go!</button>
<div class="clearfix" style="margin-bottom:10px"> </div>

Answer 12

style="padding-top: 8px"

अपनी पंक्ति में अपने div को ऊपर या नीचे स्थानांतरित करने के लिए इसका उपयोग करें। मेरे लिए अद्भुत काम करता है।