बूटस्ट्रैप 3.0: एक ही लाइन पर टेक्स्ट और इनपुट कैसे करें?

Question 1

मैं वर्तमान में अपनी वेबसाइट को बूटस्ट्रैप 3.0 पर स्विच कर रहा हूं। मुझे फॉर्म इनपुट और टेक्स्ट फ़ॉर्मेटिंग के साथ समस्या हो रही है। बूटस्ट्रैप 2 में जो काम किया गया वह बूटस्ट्रैप 3 में काम नहीं करता है।

फॉर्म इनपुट से पहले और बाद में मुझे एक ही लाइन पर टेक्स्ट कैसे मिल सकता है? मैंने इसे उदाहरण के बूटस्ट्रैप 3 संस्करण में 'फॉर्म-कंट्रोल' क्लास की समस्या के लिए संकुचित कर दिया है।

मैं एक पंक्ति में सभी पाठ और इनपुट प्राप्त करने के बारे में कैसे जाऊँगा? मैं बूटस्ट्रैप 3 उदाहरण को jsfiddle में बूटस्ट्रैप 2 उदाहरण की तरह देखना चाहता हूं।

जेएस फिडेल उदाहरण

<div class="container ">
  <form>
      <h3> Format used to look like this in Bootstrap 2 </h3>
      <div class="row ">
          <label for="return1"><b>Return:</b></label>
          <input id="return1" name='return1' class=" input input-sm" style="width:150px"
                 type="text" value='8/28/2013'>
          <span id='return1' style='color:blue'> +/- 14 Days</span>
      </div>

       <br>   
       <br>   
           <h3> BootStrap 3 Version </h3>

      <div class="row">
          <label for="return2"><b>Return:</b></label>
          <input id="return2" name='return2' class="form-control input input-sm" style="width:150px"
                 type="text" value='8/28/2013'>
          <span id='return2' style='color:blue'> +/- 14 Days</span>
      </div>
  </form>

अपडेट: मैं इस कोड को बदल देता हूं जो काम करता है लेकिन अब संरेखण के साथ परेशानी हो रही है। कोई विचार?

<div class="form-group">
<div class="row">
    <div class="col-xs-3">
        <label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>
    </div>
    <div class="col-xs-2">
        <select name="class_type" id="class_type" class="  form-control input-lg" style="width:200px" autocomplete="off">
            <option >Economy</option>
            <option >Premium Economy</option>
            <option >Club World</option>
            <option >First Class</option>
        </select>
    </div>
 </div>

Question 2

मैं प्रत्येक तत्व है कि आप एक अलग col-md- * div अपनी पंक्ति के भीतर चाहते हैं। या अपने तत्वों को इनलाइन प्रदर्शित करने के लिए मजबूर करें। प्रपत्र-नियंत्रण वर्ग ब्लॉक प्रदर्शित करता है, क्योंकि जिस तरह से बूटस्ट्रैप सोचता है कि यह किया जाना चाहिए।

Question 3

प्रलेखन से सीधे http://getbootstrap.com/css/#forms-horiolet ।

बूटस्ट्रैप के पूर्वनिर्धारित ग्रिड कक्षाओं का उपयोग लेबल और प्रपत्र नियंत्रण के समूहों को एक क्षैतिज लेआउट .form-horizontalमें फ़ॉर्म से जोड़कर करें (जिसका होना आवश्यक नहीं है <form>)। .form-groupsग्रिड पंक्तियों के रूप में व्यवहार करने के लिए इतना परिवर्तन करना , इसलिए इसकी कोई आवश्यकता नहीं है .row।

नमूना:

<form class="form-horizontal">
  <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>

Question 4

आपको जो चाहिए वो है .form-inlineक्लास। हालांकि आपको सावधान रहने की जरूरत है, नई .form.inlineकक्षा के लिए आपको प्रत्येक नियंत्रण के लिए चौड़ाई निर्दिष्ट करनी होगी।

इस पर एक नजर

Question 5

इनमें से किसी ने मेरे लिए काम नहीं किया, .form-control-staticकक्षा का उपयोग करना पड़ा ।

http://getbootstrap.com/css/#forms-controls-static

Question 6

आप इसे इस तरह से कर सकते हैं:

<form class="form-horizontal" role="form">
    <div class="form-group">
        <label for="inputType" class="col-sm-2 control-label">Label</label>
        <div class="col-sm-4">
            <input type="text" class="form-control" id="input" placeholder="Input text">
        </div>
    </div>
</form>

बेला

Question 7

सिर्फ div की माँ को "class =" col-lg-12 ""

<div class="form-group">
<div class="row">
    <div class="col-xs-3">
        <label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>
    </div>
    <div class="col-xs-2">
        <select name="class_type" id="class_type" class="  form-control input-lg" style="width:200px" autocomplete="off">
            <option >Economy</option>
            <option >Premium Economy</option>
            <option >Club World</option>
            <option >First Class</option>
        </select>
    </div>
 </div>

यह

<div class="form-group">
<div class="col-lg-12">
  <div class="row">
    <div class="col-xs-3">
        <label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>
    </div>
    <div class="col-xs-2">
        <select name="class_type" id="class_type" class="  form-control input-lg" style="width:200px" autocomplete="off">
            <option >Economy</option>
            <option >Premium Economy</option>
            <option >Club World</option>
            <option >First Class</option>
        </select>
    </div>
</div>
</div>

Question 8

जिस तरह से मैंने इसे हल किया वह बस मेरी साइट के मुख्य सीएसएस पर मेरे सभी टेक्स्टबॉक्स के लिए एक ओवरराइड जोड़ने के लिए था, जैसा कि:

.form-control {
    display:initial !important;
}

Question 9

सभी कृपया अपडेट किए गए कोड को जांचें क्योंकि हमें इसका उपयोग करना है

 form-control-static not only form-control

http://jsfiddle.net/tusharD/58LCQ/34/

सादर धन्यवाद

Question 10

क्षैतिज तत्व के लिए बूटस्ट्रैप 4 में आप अपने लेबल और नियंत्रण की चौड़ाई निर्दिष्ट करने के लिए कक्षाओं के .rowसाथ उपयोग कर सकते हैं .col-*-*। इस लिंक को देखें ।

और यदि आप एक ही क्षैतिज पंक्ति पर लेबल, प्रपत्र नियंत्रण और बटन की एक श्रृंखला प्रदर्शित करना चाहते हैं, तो आप .form-inlineइस लिंक की अधिक जानकारी के लिए उपयोग कर सकते हैं

Question 11

या आप यह कर सकते हैं:

<table>
  <tr>
    <td><b>Return:</b></td>
    <td><input id="return1" name='return1' 
              class=" input input-sm" style="width:150px"
              type="text" value='8/28/2013'></td>
  </tr>
</table>

मैंने ऊपर दिए गए सुझावों में से हर एक को आजमाया और उनमें से किसी ने भी काम नहीं किया। मैं 12 कॉलम ग्रिड में निश्चित संख्या में कॉलम नहीं चुनना चाहता। मैं इसके तुरंत बाद प्रॉम्प्ट, और इनपुट चाहता हूं, और मैं चाहता हूं कि कॉलम को आवश्यकतानुसार बढ़ाया जाए।

हाँ, मुझे पता है, कि बूटस्ट्रैप क्या है। और आपको कभी टेबल का उपयोग नहीं करना चाहिए। क्योंकि DIV तालिकाओं की तुलना में बहुत बेहतर है। लेकिन समस्या यह है कि तालिकाओं, पंक्तियों और कोशिकाओं को वास्तव में काम करता है।

हाँ - मैं सच में जानता हूँ कि सीएसएस zealots हैं, और घुटने झटका प्रतिक्रिया कभी भी टेबल, टीआर, और टीडी का उपयोग नहीं करते हैं। हां, मुझे पता है कि DIV वर्ग = "पंक्ति" के साथ DIV वर्ग = "तालिका" और DIV वर्ग = "कोशिका" बहुत बेहतर है। को छोड़कर जब यह काम नहीं करता है, और कई मामले हैं। मेरा मानना है कि लोगों को उन स्थितियों को नजरअंदाज करना चाहिए। ऐसे समय होते हैं कि TABLE / TR / TD ठीक काम करेंगे, और अधिक जटिल और अधिक नाजुक दृष्टिकोण का उपयोग करने का कोई कारण नहीं है क्योंकि इसे अधिक सुरुचिपूर्ण माना जाता है। एक डेवलपर को यह समझना चाहिए कि विभिन्न दृष्टिकोणों के लाभ क्या हैं, और ट्रेडऑफ़्स, और कोई पूर्ण नियम नहीं है कि DIV बेहतर हैं।

"केस इन पॉइंट - इस चर्चा के आधार पर मैंने कुछ मौजूदा tds और trs को divs में बदल दिया। 45 मिनट इस बारे में मैसेज कर रहा था कि सब कुछ एक दूसरे के बगल में लाइन में आने की कोशिश कर रहा था और मैंने हार मान ली। टीडी 10 सेकंड बाद वापस आ गया। - - सीधे दूर - सभी ब्राउज़रों पर, और अधिक करने के लिए कुछ भी नहीं। कृपया मुझे समझने की कोशिश करें - मुझे किसी भी अन्य तरीके से करने के लिए क्या संभव औचित्य है! देखें [ https://stackoverflow.com/a/4278073/1758051]

और इस: "

लेआउट आसान होना चाहिए। तथ्य यह है कि सीएसएस में शीर्ष लेख और पाद लेख के साथ एक गतिशील तीन स्तंभ लेआउट को प्राप्त करने के तरीके पर लिखे गए लेखों से पता चलता है कि यह एक खराब लेआउट प्रणाली है। बेशक आप इसे काम करने के लिए प्राप्त कर सकते हैं, लेकिन इसे कैसे करना है, इसके बारे में ऑनलाइन सैकड़ों लेख हैं। तालिकाओं के साथ समान लेआउट के लिए बहुत अधिक ऐसे लेख नहीं हैं क्योंकि यह स्पष्ट रूप से स्पष्ट है। कोई फर्क नहीं पड़ता कि आप टेबल के खिलाफ और सीएसएस के पक्ष में क्या कहते हैं, यह एक तथ्य यह सब मिटा देता है: सीएसएस में एक बुनियादी तीन कॉलम लेआउट को अक्सर "द होली ग्रिल" कहा जाता है। "[ https://stackoverflow.com/a/4964107/ 1758051]

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