css - ブートストラップ-3水平フォームラベルが上部の入力フィールドにとどまらない

Question

.form-horizo​​ntal で Bootstrap 3 を使用し、以下のブートストラップ クラスを使用すると、必要なラベルが上部にあるフォームが取得されます。http://bootply.com/73486

ただし、画像 2 では、.col-lg-* などのクラスを使用して幅を目的のサイズに縮小しようとしています。色々なサイズを試しましたがダメでした..

  <div class="form-group">
    <label class="control-label"> <%= f.label :title %></label>

     <div class="form-control">
       <%= f.text_field :title, :placeholder => "title" %>
     </div>

 </div>

画像1

画像2

ただし、幅を目的のサイズに縮小するために入力をグリッド列にラップしようとすると、ラベルがフォーム入力の上ではなく横に移動します。

 <div class="form-group">
   <label class="control-label col-lg-2"> <%= f.label :title %></label>
   <div class="col-lg-10">
     <div class="form-control">
      <%= f.text_field :title, :placeholder => "title" %>
    </div>
  </div>
 </div>

Answer 1

最初の例のコードは正しいです。form-horizo​​ntal スタイルに移行せずに幅を縮小するには、form-group 全体 (またはフィールド セット) をより小さな div でラップしてみてください。

<div class="col-lg-10">
     <div class="form-group">
        <label class="control-label"> <%= f.label :title %></label>

         <div class="form-control">
           <%= f.text_field :title, :placeholder => "title" %>
         </div>

     </div>
</div>

Answer 2

`<div class="col-lg-10">
    <div class="form-group">
       <label class="control-label"> <%= f.label :title %></label>

       <%= f.text_field :title, :placeholder => "title", :class => "form-control" %>

 </div>
</div>`

これを試して