ट्विटर बूटस्ट्रैप में एक रूप क्षैतिज के अंदर इनलाइन फॉर्म?

Question

बिना किसी होममेड क्लासेस के ट्विटर बूटस्ट्रैप में ऐसा दिखने वाला फ़ॉर्म (कृपया नीचे लिंक देखें) डिज़ाइन करने का सबसे अच्छा तरीका क्या है?

क्या नीचे दिए गए उदाहरण की तरह एक फॉर्म-हॉरिज़ॉन्ट के अंदर इनर फॉर्म-इनलाइन सेट करना संभव है:

Answer 1

घोंसला <form>टैग न करें, यह काम नहीं करेगा। बस बूटस्ट्रैप कक्षाओं का उपयोग करें।

बूटस्ट्रैप ३

<form class="form-horizontal" role="form">
    <div class="form-group">
      <label for="inputType" class="col-md-2 control-label">Type</label>
      <div class="col-md-3">
          <input type="text" class="form-control" id="inputType" placeholder="Type">
      </div>
    </div>
    <div class="form-group">
        <span class="col-md-2 control-label">Metadata</span>
        <div class="col-md-6">
            <div class="form-group row">
                <label for="inputKey" class="col-md-1 control-label">Key</label>
                <div class="col-md-2">
                    <input type="text" class="form-control" id="inputKey" placeholder="Key">
                </div>
                <label for="inputValue" class="col-md-1 control-label">Value</label>
                <div class="col-md-2">
                    <input type="text" class="form-control" id="inputValue" placeholder="Value">
                </div>
            </div>
        </div>
    </div>
</form>

आप उस व्यवहार को कई तरीकों से प्राप्त कर सकते हैं, यह एक उदाहरण है। इस बूते पर परीक्षण करें

बूटस्ट्रैप २

<form class="form-horizontal">
    <div class="control-group">
        <label class="control-label" for="inputType">Type</label>
        <div class="controls">
            <input type="text" id="inputType" placeholder="Type">
        </div>
    </div>
    <div class="control-group">
        <span class="control-label">Metadata</span>
        <div class="controls form-inline">
            <label for="inputKey">Key</label>
            <input type="text" class="input-small" placeholder="Key" id="inputKey">
            <label for="inputValue">Value</label>
            <input type="password" class="input-small" placeholder="Value" id="inputValue">
        </div>
    </div>
</form>

ध्यान दें कि मैं .form-inlineप्रोपर स्टाइलिंग को एक के अंदर लाने के लिए उपयोग कर रहा हूं .controls।
आप इसे इस jsfiddle पर परीक्षण कर सकते हैं

Comments

आप डिव पर फॉर्म क्लासेस भी जोड़ सकते हैं, मेरे मामले में मैंने एक स्पैन 6 डिव पर वर्टिकल फॉर्म क्लास और एक स्पैन 12 डिव पर एक हॉरिजॉन्टल फॉर्म क्लास का उपयोग किया है

— इफ्ता

यह बूटस्ट्रैप 2 के लिए काम करता है। बूटस्ट्रैप 3 यहां जाएं: stackoverflow.com/questions/18429121/...

— Tomislav Muic

बूटस्ट्रैप 3 में, यदि इनपुट के नीचे कोई गैप है, तो "फॉर्म-ग्रुप" को हटा दें। यह प्रत्येक div के तल पर एक 15px अंतर जोड़ देता है जिसे आप इसके साथ उपयोग करते हैं।

— Darkzangel

आपको की-वैल्यू उदाहरण में पंक्ति के साथ फॉर्म-ग्रुप को मिलाने की जरूरत नहीं है। @ रैप -2-एच: आप उदाहरण कोड पेस्ट कर सकते हैं और रन पर क्लिक कर सकते हैं।

— सेबस्टियन

यह काम करता है, लेकिन मैं इसे बूटस्ट्रैप 3 के वर्तमान संस्करण में सरल बनाने में सक्षम था ... यह इस समाधान की कुंजी लगता है कि किसी भी इनपुट नियंत्रण को div के अंदर रखने के लिए, अन्यथा col-xx ग्रिड लेआउट काम नहीं करता है। प्रपत्र-समूह को घोंसला बनाने के लिए आवश्यक नहीं था, माता-पिता col-xx- # एक ही div साझा कर सकते हैं और "पंक्ति" वर्ग के लिए कोई आवश्यकता नहीं है क्योंकि मूल प्रपत्र पहले से ही प्रपत्र-क्षैतिज (100%) है।

— टोनी वॉल

Answer 2

बूटस्ट्रैप के लिए 3 उदाहरण ऊपर दिए गए कार्य हैं, लेकिन उन क्षेत्रों के लिए फॉर्म-इनलाइन फॉर्म-इनलाइन का उपयोग करने के बजाय अधूरा है, जो आप इनलाइन चाहते हैं।

उदाहरण के लिए:

<div class="form-group">
     <label>CVV</label>
     <input type="text" size="4" class="form-control" />
</div>

<div class="form-inline">
      <label>Expiration (MM/YYYY)</label><br>
      <input type="text" size="2" class="form-control" /> / <input type="text" size="4" class="form-control" />
</div>

Comments

यह आपके लिए फॉर्म-कंट्रोल क्लास के कारण काम नहीं कर सकता है जो "डिस्प्ले: ब्लॉक" सेट करता है। यदि आप इसे "प्रदर्शन: इनलाइन-ब्लॉक" में ओवरराइड करते हैं तो यह काम करना चाहिए।

— सेड्रिक गुइलमेटे

ये काम नहीं कर रहा है। जो प्रश्न पूछता है उसे करने की कोशिश करें, यह फॉर्म-इनलाइन के साथ संभव नहीं है।

— सेबेस्टियन

इसके साथ एकमात्र समस्या यह है कि उप-क्षेत्र को पूरी चौड़ाई तक विस्तारित नहीं किया गया है और ग्रिड साइज़िंग का उपयोग करने के किसी भी प्रयास को आवश्यक न्यूनतम सामग्री चौड़ाई के सापेक्ष स्क्वैश किया जाएगा। अन्य समाधान सिर्फ इतने सारे डिव के बिना बेहतर है (मेरी टिप्पणी देखें)।

— टोनी वॉल

आपको फॉर्म-इनलाइन कक्षा

— ymakux

jsfiddle.net/9637fywb यह वर्तमान नवीनतम बूटस्ट्रैप CDN (3.3.5) का उपयोग करते हुए वांछित के रूप में कार्य नहीं करता है। यह उदाहरण "इनलाइन" अनुभाग के अंदर दो लेबल के लिए भी खाता नहीं है। शायद फ़िडल किसी तरह का एक आवरण गायब कर रहा है, लेकिन ऐसा लगता है कि उत्तर में शामिल किया जाना चाहिए, यदि ऐसा है।

— 1

Answer 3

यह इनपुट के शीर्ष पर बैठने के लिए लेबल प्राप्त करने के लिए एक css वर्ग के साथ ट्विटर बूटस्ट्रैप 3.x का उपयोग करता है। यहाँ एक फिडेल लिंक दिया गया है , प्रभाव देखने के लिए पर्याप्त विस्तृत परिणाम पैनल का विस्तार करना सुनिश्चित करें।

HTML:

  <div class="row myform">
     <div class="col-md-12">
        <form name="myform" role="form" novalidate>
           <div class="form-group">
              <label class="control-label" for="fullName">Address Line</label>
              <input required type="text" name="addr" id="addr" class="form-control" placeholder="Address"/>
           </div>

           <div class="form-inline">
              <div class="form-group">
                 <label>State</label>
                 <input required type="text" name="state" id="state" class="form-control" placeholder="State"/>
              </div>

              <div class="form-group">
                 <label>ZIP</label>
                 <input required type="text" name="zip" id="zip" class="form-control" placeholder="Zip"/>
              </div>
           </div>

           <div class="form-group">
              <label class="control-label" for="country">Country</label>
              <input required type="text" name="country" id="country" class="form-control" placeholder="country"/>
           </div>
        </form>
     </div>
  </div>

सीएसएस:

.myform input.form-control {
   display: block;  /* allows labels to sit on input when inline */
   margin-bottom: 15px; /* gives padding to bottom of inline inputs */
}

Answer 4

चूंकि बूटस्ट्रैप 4 का उपयोग div class = "form-row" में div class = "form-group col-X" के साथ किया जाता है। X वह चौड़ाई है जिसकी आपको आवश्यकता है। आपको अच्छे इनलाइन कॉलम मिलेंगे। मुरली देखना ।

<form class="form-horizontal" name="FORMNAME" method="post" action="ACTION" enctype="multipart/form-data">
    <div class="form-group">
        <label class="control-label col-sm-2" for="naam">Naam:&nbsp;*</label>
        <div class="col-sm-10">
            <input type="text" require class="form-control" id="naam" name="Naam" placeholder="Uw naam" value="{--NAAM--}" >
            <div id="naamx" class="form-error form-hidden">Wat is uw naam?</div>
        </div>
    </div>

    <div class="form-row">

        <div class="form-group col-5">
            <label class="control-label col-sm-4" for="telefoon">Telefoon:&nbsp;*</label>
            <div class="col-sm-12">
                <input type="tel" require class="form-control" id="telefoon" name="Telefoon" placeholder="Telefoon nummer" value="{--TELEFOON--}" >
                <div id="telefoonx" class="form-error form-hidden">Wat is uw telefoonnummer?</div>
            </div>
        </div>

        <div class="form-group col-5">
            <label class="control-label col-sm-4" for="email">E-mail: </label>
            <div class="col-sm-12">
                <input type="email" require class="form-control" id="email" name="E-mail" placeholder="E-mail adres" value="{--E-MAIL--}" >
                <div id="emailx" class="form-error form-hidden">Wat is uw e-mail adres?</div>
                    </div>
                </div>

        </div>

    <div class="form-group">
        <label class="control-label col-sm-2" for="titel">Titel:&nbsp;*</label>
        <div class="col-sm-10">
            <input type="text" require class="form-control" id="titel" name="Titel" placeholder="Titel van uw vraag of aanbod" value="{--TITEL--}" >
            <div id="titelx" class="form-error form-hidden">Wat is de titel van uw vraag of aanbod?</div>
        </div>
    </div>
<from>

Answer 5

मुझे पता है कि यह एक पुराना उत्तर है, लेकिन यहां मैं आमतौर पर ऐसा करता हूं:

सीएसएस:

.form-control-inline {
   width: auto;
   float:left;
   margin-right: 5px;
}

फिर उन क्षेत्रों को लपेटें जिन्हें आप एक div में जोड़ना चाहते हैं और इनपुट में .form-control-inline को जोड़ते हैं, उदाहरण:

एचटीएमएल

<label class="control-label">Date of birth:</label>
<div>
<select class="form-control form-control-inline" name="year"> ... </select>
<select class="form-control form-control-inline" name="month"> ... </select>
<select class="form-control form-control-inline" name="day"> ... </select>
</div>

Answer 6

इसे सरल बनाने के लिए, बस class="form-inline"इनपुट से पहले जोड़ें ।

उदाहरण:

<div class="col-md-4 form-inline"> //add the class here...
     <label>Lot Size:</label>
     <input type="text" value="" name="" class="form-control" >
 </div>