इनपुट क्षेत्र के ऊपर बाईं ओर लेबल करें

Question

मैं लेबल को इनपुट फ़ील्ड के ऊपर नहीं, बल्कि बाईं ओर रखना चाहूंगा।

<form method="post" action="" role="form" class="form-inline">
  <div class="form-group">
    <label for="rg-from">Ab: </label>
    <input type="text" id="rg-from" name="rg-from" value="" class="form-control">
  </div>
  <div class="form-group">
    <label for="rg-to">Bis: </label>
    <input type="text" id="rg-to" name="rg-to" value="" class="form-control">
  </div>
  <div class="form-group">
    <input type="button" value="Clear" class="btn btn-default btn-clear"> 
    <input type="submit" value="Los!" class="btn btn-primary">
  </div>
</form>

यह कोड मुझे देता है:

मैं लेना पसंद करूँगा:

Answer 1

आप प्रत्येक फॉर्म-समूह के लिए फॉर्म-इनलाइन क्लास का उपयोग कर सकते हैं :)

<form>                      
    <div class="form-group form-inline">                            
        <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
    </div>
</form>

Comments

धन्यवाद। लेबल के बाद मेरे पास एक div input-group था जो कि चौड़ाई में ही चूक करता था: 100%। 50% से उस div को ओवरराइड करने की आवश्यकता है। तब लेबल और इनपुट-समूह (डेटकपर) एक पंक्ति में फिट होगा। (काश, यह ओवरराइड किए बिना क्लीनर था।)

— टर्बो

नहीं, आपको इसे ओवरराइड करने की आवश्यकता नहीं है। बस 'पंक्ति' और 'col- *' जैसे ग्रिड विकल्प आज़माएँ।

— gvgramazio

यह स्वीकृत उत्तर होना चाहिए। यह दर्शाता है कि प्रपत्र के मूल वर्ग के बजाय व्यक्तिगत रूप समूह बनाने के लिए form-groupइनहेरिट कर सकते हैं form-inline।

— चरवाहे

नोट: मेरे मामले में मुझे

— INIV

Answer 2

<label>बाहर रखो form-group:

<form class="form-inline">
  <label for="rg-from">Ab: </label>
  <div class="form-group">
    <input type="text" id="rg-from" name="rg-from" value="" class="form-control">
  </div>
  <!-- rest of form -->
</form>

Comments

मजाकिया, यह काम करता है लेकिन बूटस्ट्रैप का प्रलेखन यह नहीं दिखाता है। यह फॉर्म समूह में लेबल दिखाता है

— स्टीवेंसो

Answer 3

बूटस्ट्रैप 3 दस्तावेज़ीकरण सीएसएस प्रलेखन टैब में "कस्टम चौड़ाई की आवश्यकता है" लेबल वाले अनुभाग में इस बारे में बात करता है, जो बताता है:

बूटस्ट्रैप में इनपुट्स, सिलेक्ट्स और टेक्सटेरियस डिफ़ॉल्ट रूप से 100% चौड़े हैं। इनलाइन फॉर्म का उपयोग करने के लिए, आपको फॉर्म के नियंत्रणों पर एक चौड़ाई निर्धारित करनी होगी।

यदि आप "चौड़ाई" शैली को दबाने या कम करने के लिए अपने ब्राउज़र और फायरबग या क्रोम टूल का उपयोग करते हैं, तो आपको उन चीजों को देखना चाहिए जो वे चाहते हैं। स्पष्ट रूप से आप समस्या को ठीक करने के लिए उपयुक्त CSS बना सकते हैं।

हालाँकि, मुझे यह अजीब लगता है कि मुझे ऐसा करने की आवश्यकता है। मैं मदद नहीं कर सका, लेकिन इस हेरफेर को महसूस करना कष्टप्रद और दीर्घकालिक, त्रुटि प्रवण दोनों था। अंततः, मैंने एक डमी क्लास और कुछ जेएस का विश्व स्तर पर उपयोग किया, जो मेरे सभी इनलाइन इनपुटों को दर्शाता है। यह छोटी संख्या में मामले थे, इसलिए बहुत चिंता की बात नहीं थी।

बहरहाल, मैं भी किसी ऐसे व्यक्ति से सुनना पसंद करूंगा, जिसके पास "सही" समाधान है, और वह मेरी शर्म / हेक को समाप्त कर सकता है।

आशा है कि यह मदद करता है, और आप सभी लोगों पर एक गैसकेट नहीं उड़ाने के लिए सहारा देता है जिसने आपके अनुरोध को बूटस्ट्रैप 3 चिंता के रूप में अनदेखा किया है।

Comments

कैसे के बारे में कहते हैं, लेबल की चौड़ाई बना रही कॉल- sm-2 - और इनपुट col-sm-10?

— निको सेप

Answer 4

आप ऐसे फॉर्म बना सकते हैं जहां लेबल और फ़ॉर्म नियंत्रण दो विधि का उपयोग कर रहे हैं -

1. इनलाइन फॉर्म लेआउट

<form class="form-inline" role="form">
    <div class="form-group">
        <label for="inputEmail">Email</label>
        <input type="email" class="form-control" id="inputEmail" placeholder="Email">
    </div>
    <div class="form-group">
        <label for="inputPassword">Password</label>
        <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
    <button type="reset" class="btn btn-default">Reset</button>
    <button type="submit" class="btn btn-primary">Login</button>
</form>

2. क्षैतिज रूप लेआउट

<form class="form-horizontal">
    <div class="row">
        <div class="col-sm-4">
            <div class="form-group">
                <label for="inputEmail" class="control-label col-xs-3">Email</label>
                <div class="col-xs-9">
                    <input type="email" class="form-control" id="inputEmail" placeholder="Email">
                </div>
            </div>
        </div>
        <div class="col-sm-5">
            <div class="form-group">
                <label for="inputPassword" class="control-label col-xs-3">Password</label>
                <div class="col-xs-9">
                    <input type="password" class="form-control" id="inputPassword" placeholder="Password">
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <button type="reset" class="btn btn-default">Reset</button>
            <button type="submit" class="btn btn-primary">Login</button>
        </div>
    </div>
</form>

अधिक जानकारी और लाइव डेमो के लिए आप इस पेज को देख सकते हैं - http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-forms.php

Comments

समाधान 1 मेरे लिए काम नहीं करता है। इनपुट नियंत्रण के ऊपर अभी भी लेबल। कैंडू का समाधान वह होता है जो मैं चाहता हूं, लेकिन क्या यह सही तरीका है?

— किट फिस्टो

Answer 5

ऐशे ही

डेमो

एचटीएमएल

<div class="row">
  <form class="form-inline">
    <fieldset>
      <label class="control-label"><strong>AB :</strong></label>
      <input type="text" class="input-mini" >
      <label class="control-label"><strong>BIS:</strong></label>
      <input type="text" class="input-mini" >
      <input type="button" value="Clear" class="btn btn-default btn-clear">
      <input type="submit" value="Los!" class="btn btn-primary">
    </fieldset>
  </form>
</div>

Comments

यह बूटस्ट्रैप v2.1.0 के लिए समाधान है, लेकिन बूटस्ट्रैप v3.0.0 के लिए नहीं

— स्टीफन वोग

बूटस्ट्रैप 3 में "फॉर्म-इनलाइन" मौजूद है, और मुझे लगता है कि यह महत्वपूर्ण है: +1

— प्रति क्वेस्ट एरॉनसन

Answer 6

मुझे भी यही समस्या थी, यहाँ मेरा समाधान है:

<form method="post" class="form-inline form-horizontal" role="form">
        <label class="control-label col-sm-5" for="jbe"><i class="icon-envelope"></i> Email me things like this: </label>
        <div class="input-group col-sm-7">
            <input class="form-control" type="email" name="email" placeholder="[e-mail]"/>
            <span class="input-group-btn">
                <button class="btn btn-primary" type="submit">Submit</button>
            </span>
        </div>
    </form>

यहाँ डेमो है

Answer 7

आपको ऐसे सभी तत्वों को छोड़ देना चाहिए:

.form-group,
.form-group label,
.form-group input { float:left; display:inline;   }

वांछित तत्वों को कुछ मार्जिन दें:

 .form-group { margin-right:5px }

और लेबल को खेतों की ऊंचाई के समान लाइन ऊंचाई सेट करें:

.form-group label { line-height:--px; }

Answer 8

आप मौजूदा उत्तरों से देख सकते हैं कि बूटस्ट्रैप की शब्दावली भ्रामक है। यदि आप बूटस्ट्रैप दस्तावेज़ीकरण को देखते हैं, तो आप देखते हैं कि वर्ग रूप-क्षैतिज वास्तव में एक दूसरे के नीचे के क्षेत्रों के साथ एक रूप के लिए है, अर्थात अधिकांश लोग एक ऊर्ध्वाधर रूप में क्या सोचते हैं। पृष्ठ पर जाने वाले फ़ॉर्म के लिए सही वर्ग फॉर्म-इनलाइन है । उन्होंने शायद इनलाइन शब्द को पेश किया क्योंकि उन्होंने पहले ही क्षैतिज शब्द का दुरुपयोग किया था ।

आप यहाँ कुछ उत्तरों से देखते हैं कि कुछ लोग इन दोनों वर्गों का एक रूप में उपयोग कर रहे हैं! दूसरों को लगता है कि जब उन्हें वास्तव में फॉर्म-इनलाइन चाहिए, तो उन्हें फॉर्म-क्षैतिज की आवश्यकता होती है ।

मैं इसे बूटस्ट्रैप डॉक्यूमेंटेशन में बताए अनुसार करने का सुझाव देता हूं:

<form class="form-inline">
  <div class="form-group">
    <label for="nameId">Name</label>
    <input type="text" class="form-control" id="nameId" placeholder="Jane Doe">
  </div>
</form>

जो उत्पादन करता है:

Comments

अपने कोड को कॉपी और पेस्ट करते हुए, मुझे बूटस्ट्रैप 3.3.4 के साथ टेक्स्ट इनपुट के ऊपर नाम लेबल मिलता है।

— माइक कोविंगटन

Answer 9

आप लेबल के अंदर एक स्पैन टैग का उपयोग कर सकते हैं

  <div class="form-group">
    <label for="rg-from">
      <span>Ab:</span> 
      <input type="text" id="rg-from" name="rg-from" value="" class="form-control">
    </label>
  </div>

Answer 10

मैंने अपने मुद्दे को ठीक करने में कामयाबी हासिल की। ठीक काम करने के लिए लगता है और इसका मतलब है कि मैं अपने सभी आदानों को मैन्युअल रूप से चौड़ाई जोड़ने की जरूरत नहीं है।

.form-inline .form-group input {
 width: auto; 
}

Comments

यह नहीं है कि आप बूटस्ट्रैप का उपयोग कैसे करें। मेरा सुझाव है कि आप अपनी ज़रूरतों के लिए निर्मित कक्षाओं का उपयोग करें, जो मौजूदा लोगों को संशोधित करें।

— gvgramazio

हाँ मैं सहमत हूँ, मैंने इसे तब लिखा जब मैं पूरे बूटस्ट्रैप दृश्य के लिए नया था।

— टॉम सी

Answer 11

मुझे यकीन है कि आप पहले ही अपना जवाब पा चुके होंगे ... यहाँ पर जो समाधान मैंने निकाला है।

वह मेरा CSS है।

.field, .actions {
    margin-bottom: 15px;
  }
  .field label {
    float: left;
    width: 30%;
    text-align: right;
    padding-right: 10px;
    margin: 5px 0px 5px 0px;
  }
  .field input {
    width: 70%;
    margin: 0px;
  }

और मेरा HTML ...

<h1>New customer</h1>
<div class="container form-center">
    <form accept-charset="UTF-8" action="/customers" class="new_customer" id="new_customer" method="post">
    <div style="margin:0;padding:0;display:inline"></div>

  <div class="field">
    <label for="customer_first_name">First name</label>
    <input class="form-control" id="customer_first_name" name="customer[first_name]" type="text" />
  </div>
  <div class="field">
    <label for="customer_last_name">Last name</label>
    <input class="form-control" id="customer_last_name" name="customer[last_name]" type="text" />
  </div>
  <div class="field">
    <label for="customer_addr1">Addr1</label>
    <input class="form-control" id="customer_addr1" name="customer[addr1]" type="text" />
  </div>
  <div class="field">
    <label for="customer_addr2">Addr2</label>
    <input class="form-control" id="customer_addr2" name="customer[addr2]" type="text" />
  </div>
  <div class="field">
    <label for="customer_city">City</label>
    <input class="form-control" id="customer_city" name="customer[city]" type="text" />
  </div>
  <div class="field">
    <label for="customer_pincode">Pincode</label>
    <input class="form-control" id="customer_pincode" name="customer[pincode]" type="text" />
  </div>
  <div class="field">
    <label for="customer_homephone">Homephone</label>
    <input class="form-control" id="customer_homephone" name="customer[homephone]" type="text" />
  </div>
  <div class="field">
    <label for="customer_mobile">Mobile</label>
    <input class="form-control" id="customer_mobile" name="customer[mobile]" type="text" />
  </div>
  <div class="actions">
    <input class="btn btn-primary btn-large btn-block" name="commit" type="submit" value="Create Customer" />
  </div>
</form>
</div>

आप यहाँ काम कर रहे उदाहरण देख सकते हैं ... http://jsfiddle.net/s6Ujm/

पुनश्च: मैं एक शुरुआत भी कर रहा हूं, प्रो डिजाइनर ... अपनी समीक्षा साझा करें।

Answer 12

मुझे लगता है कि यह वही है जो आप बूटस्ट्रैप प्रलेखन से चाहते हैं "क्षैतिज रूप बूटस्ट्रैप की पूर्वनिर्धारित ग्रिड कक्षाओं का उपयोग लेबल और प्रपत्र नियंत्रण के समूहों को एक क्षैतिज लेआउट में प्रपत्र को जोड़कर। ग्रिड पंक्तियों के रूप में व्यवहार करें, इसलिए .row की कोई आवश्यकता नहीं है ”। इसलिए:

<form class="form-horizontal" role="form">
<div class="form-group">
  <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
  <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
  <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
  <div class="col-sm-10">
    <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
  </div>
</div>
<div class="form-group">
  <div class="col-sm-offset-2 col-sm-10">
    <div class="checkbox">
      <label>
        <input type="checkbox"> Remember me
      </label>
    </div>
  </div>
</div>
<div class="form-group">
  <div class="col-sm-offset-2 col-sm-10">
    <button type="submit" class="btn btn-default">Sign in</button>
  </div>
</div>
</form>

फिडल: http://jsfiddle.net/beewayne/B9jj2/29/

Comments

आपकी फिडेल 404 एलआईडी

— माइक कोविंगटन

Answer 13

<div class="control-group">
   <label class="control-label" for="firstname">First Name</label>
   <div class="controls">
    <input type="text" id="firstname" name="firstname"/>
   </div>
</div>

इसके अलावा, हम इसे बस के रूप में उपयोग कर सकते हैं

<label>First name:
    <input type="text" id="firstname" name="firstname"/>
</label>

Comments

क्लास = "कंट्रोल-ग्रुप" Boostrap V3 में मौजूद नहीं है

— स्टीफन वोग

Answer 14

ऐसा लगता style="width:inherit;"है कि इनपुट में जोड़ना ठीक काम करता है। jsfiddle डेमो

Answer 15

कोई सीएसएस की आवश्यकता नहीं है। यह आपके पृष्ठ पर ठीक दिखना चाहिए। आप col-md-*अपनी जरूरत के अनुसार सेट कर सकते हैं

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="row">
                            <div class="col-md-12">
                                <form class="form-inline" role="form">
                                    <div class="col">
                                        <div class="form-group">
                                            <label for="inputEmail" class="col-sm-3">Email</label>
                                            <input type="email" class="form-control col-sm-7" id="inputEmail" placeholder="Email">
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="form-group">
                                            <label for="inputPassword" class="col-sm-3">Email</label>
                                            <input type="password" class="form-control col-sm-7" id="inputPassword" placeholder="Email">
                                        </div>
                                    </div>
                                    
                                    <button class="btn btn-primary">Button 1</button>
                                    &nbsp;&nbsp;
                                    <button class="btn btn-primary">Button 2</button>
                                </form>
                            </div>
                        </div>