bootstrap 3.0 wielokrotny tekst w formacie poziomym wydanie

Question

Próbuję wyświetlić trzy małe elementy pola tekstowego w ramach klasy poziomej formularza grupy. przy użyciu kodu

<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> 

Wynik:

Czy istnieje lepsze podejście do wyświetlania wielu pól tekstowych blisko siebie. Reszta elementów w formularzu jest wyświetlana poziomo.

Aktualizacja #

Po użyciu inline klasę formularz z wieloma innymi modyfikacjami, mam właściwego rezultatu. tutaj jest zaktualizowany kod.

<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> 

poprawny wynik:

Answer 1

Ta odpowiedź naprawdę pomogła mi opracować mój formularz z BS3.

jednak chciałem, żeby wyglądać tak:

Więc zmienione wyżej i dodaje 'sr-only' klasę etykiet chciałem ukryć (SO Screen-czytniki nadal podnieś je) i zmień rozmiary col.

(UWAGA: „sronly” klasa zastosowań OP nie klasa „sronly”, który nie działa dla mnie)

<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

Tak używać Inline Forms. Sprawdź ich dokumentację: