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

Результат:

Есть ли лучший подход для отображения нескольких текстовых полей рядом друг с другом. Остальные элементы в форме отображаются горизонтально.

Update #

После использования инлайн класса формы с большим количеством других модификаций, я получил должный результат. здесь обновлен код.

<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

Этот ответ действительно помог мне разобраться в моей форме с BS3.

Однако я хотел, чтобы выглядеть следующим образом:

Итак, я поправки выше, и добавил «стер только» класс к меткам, которые я хотел, чтобы скрыть (так что скрин-читатель еще забрать их) и изменить размеры col.

(Примечание: «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. Проверьте их документацию