ブートストラップ3.0複数のテキストボックスを横書きで発行する

Question

水平フォームグループクラス内に3つの小さなテキストボックス要素を表示しようとしています。

<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

この回答は、私がBS3で私のフォームを実践するのを助けました。

は、しかし、私はそれが次のようになりたいと思った：

ので

が、私は上記の改正、まだ（私は非表示にしたかったラベルにそうスクリーンリーダーを「SR専用」クラスを追加しましたそれらを拾い上げる）、colのサイズを変更しました。

は

（注：OPが使用する「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を使用しています。彼らのドキュメントを確認してください