bootstrap 3.0 più textbox in formato orizzontale numero

Question

Sto tentando di visualizzare tre piccoli elementi di testo all'interno di una classe di gruppo orizzontale. utilizzando il codice

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

Risultato:

Esiste un approccio migliore per visualizzare più caselle di testo vicine l'una all'altra. Il resto degli elementi nella forma viene visualizzato orizzontalmente.

Update #

Dopo aver utilizzato in linea classe form con un sacco di altre modifiche, ho ottenuto il corretto risultato. qui è il codice aggiornato.

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

risultato corretto:

Answer 1

Questa risposta mi ha davvero aiutato a risolvere il mio modulo con BS3.

Tuttavia ho voluto farlo sembrare come questo:

Così, ho modificato il sopra e ha aggiunto il 'sr-only' classe per le etichette che volevo nascondere (quindi screen reader ancora raccoglierli), e cambiato le dimensioni del col.

(NB: gli usi OP 'sronly' classe non classe 'sronly' che non funziona per me)

<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

Si usa Inline Forms. Controlla la loro documentazione