7

水平フォーム グループ クラス内に 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>

正しい結果:

ここに画像の説明を入力

4

2 に答える 2

12

この回答は、BS3 でフォームを作成するのに本当に役立ちました。

ただし、次のようにしたかったのです。

ラベルのないインライン フォームの作成

そこで、上記を修正し、非表示にしたいラベルに「sr-only」クラスを追加し (スクリーン リーダーは引き続きラベルを取得できるように)、列のサイズを変更しました。

（注：OPは、私にとっては機能しない「sr-only」クラスではなく、「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>
于 2013-10-22T12:18:36.833 に答える
3

はいインラインフォームを使用してください。ドキュメントを確認してください

于 2013-09-06T17:57:34.950 に答える