क्षैतिज फॉर्म समस्या में बूटस्ट्रैप 3.0 एकाधिक टेक्स्टबॉक्स

Question

मैं क्षैतिज रूप समूह वर्ग के भीतर तीन छोटे टेक्स्ट बॉक्स तत्वों को प्रदर्शित करने का प्रयास कर रहा हूं। कोड का उपयोग कर

<div class="form-group"> 
      <label class="col-lg-3 control-label input-sm">Date of Birth:</label> 
      <div class="col-lg-4"> 
       <div class="row"> 
       <div class="col-lg-4"> 
        <input type="text" id="txt_month" name="txt_month" class="form-control input-sm" placeholder="MM" required maxlength="2" data-validation-required-message="Month is required" > 
       </div> 
        <div class="col-lg-4"> 
        <input type="text" id="txt_day" name="txt_day" class="form-control input-sm" placeholder="DD" required maxlength="2" data-validation-required-message="Day is required" > 
       </div> 
        <div class="col-lg-4"> 
        <input type="text" id="txt_year" name="txt_year" class="form-control input-sm" placeholder="YY" required maxlength="4" data-validation-required-message="Year is required" > 
       </div> 

       </div> 

      <p class="help-block"></p> 
      </div> 
     </div> 

परिणाम:

वहाँ एक दूसरे के पास एक से अधिक पाठ बॉक्स प्रदर्शित करने के लिए एक बेहतर तरीका है। फॉर्म में शेष तत्व क्षैतिज रूप से प्रदर्शित होते हैं।

अद्यतन #

अन्य संशोधनों के बहुत सारे के साथ इनलाइन प्रपत्र वर्ग इस्तेमाल करने के बाद, मैं उचित परिणाम मिला। यहां कोड अपडेट किया गया है।

<div class="form-group"> 
      <label class="col-lg-3 control-label input-sm">Date of Birth:</label> 
      <div class="col-lg-7"> 
       <div class="form-inline"> 
         <div class="form-group "> 
         <div class="col-lg-3"> 
         <label class="sronly" for="txt_month">Enter Month</label> 
         <input type="text" id="txt_month" name="txt_month" class="form-control input-sm" style="width:60px" placeholder="MM" required maxlength="2" data-validation-required-message="Month is required" > 
         </div> 
         </div> 
         <div class="form-group"> 
          <div class="col-lg-3"> 
         <label class="sronly" for="txt_day">Enter Day</label> 
         <input type="text" id="txt_day" name="txt_day" class="form-control input-sm" style="width:60px" placeholder="DD" required maxlength="2" data-validation-required-message="Day is required" > 
         </div> 
         </div> 
         <div class="form-group"> 
         <div class="col-lg-3"> 
          <label class="sronly" for="txt_year">Enter Year</label> 
          <input type="text" id="txt_year" name="txt_year" class="form-control input-sm" style="width:60px" placeholder="YY" required maxlength="4" data-validation-required-message="Year is required" > 
         </div> 
         </div> 
       </div> 
      <p class="help-block"></p> 
      </div> 
     </div> 

सही परिणाम:

Answer 1

यह उत्तर वास्तव में मुझे बीएस 3 के साथ अपना फॉर्म बनाने में मदद करता है।

हालांकि मैं इसे इस तरह देखना चाहता:

तो, मैं ऊपर संशोधन किया है और (अभी भी लेबल मैं छिपाने के लिए चाहते थे करने के लिए 'केवल-sr' वर्ग जोड़ा तो स्क्रीन पाठकों उन्हें उठाओ), और रंग के आकार बदल दिया।

(नोट: ओ पी का उपयोग करता है 'sronly' वर्ग नहीं 'sronly' वर्ग जो मेरे लिए काम नहीं करता है)

<div class="form-group"> 
    <label class="col-lg-3 control-label ">City & County:</label> 
    <div class="col-lg-9"> 
    <div class="form-inline"> 
     <div class="form-group "> 
     <div class="col-lg-12"> 
      <label class="sr-only" for="city">City</label> 
      <input type="text" id="city" name="city" class="form-control " placeholder="E.g. Manchester" > 
     </div> 
     </div> 
     <div class="form-group "> 
     <div class="col-lg-12"> 
      <label class="sr-only" for="county">County</label> 
      <input type="text" id="county" name="county" class="form-control " placeholder="E.g. Lancashire" > 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 2

हाँ Inline Forms का उपयोग करें। उनके दस्तावेज़ों की जांच करें