入力の左にあるブートストラップの入力ラベル（上部ではなく）

Question

私はかなりブートストラップを使い慣れていて、単純なフォームを作ろうとしています。すべての要素が画面上の1行にあります。フォームのHTMLコードは次のようになります。

<form class="form-horizontal"> 
    <fieldset> 
     <div class="form-container"> 
      <div class="form-group"> 
       <label>Search by:</label> 
       <input class="form-control" type="text"> 
      </div> 
      <div class="form-group"> 
       <label>Something:</label> 
       <input class="form-control" type="text"> 
      </div> 
     </div> 
    </fieldset> 
</form> 

デフォルトでは、入力フィールドのラベルは入力フィールドに表示されます。私はそれらを入力フィールドの左側に置いて欲しい。私はグーグルでこれを実装する方法をここで確認しましたが、私が見つけた解決策はありませんでした（自分のフォームにクラスを追加してCSSを変更し、ブートストラップのフォームインライン機能を使用しようとしました）。

私はどのように私はそれを見たいと思うフォームを見せることができるか知っていますか？

Answer 1

ブートストラップグリッドシステムを利用するには、各フォームグループに2つの変更を加えたいと思うでしょう。あなたは上のラベルと入力が同じラインであることを定義するには、ブートストラップグリッドシステムを使用したいと思うでしょうhttps://v4-alpha.getbootstrap.com/layout/grid/

：あなたが使用しているが、グリッドのそれは同じ概念であるBSのバージョン

わかりません。 「COL-LG-2 col-を：あなたは同じ行になりたい項目を12

1. にならなければならないので、ラベルに次のクラスを追加します。1行の12列があることに留意してください"

をCOL-LG-10 COL-MD-10 COL-SM-10：MD-2 COL-SM-2コントロールラベル」

はdivの中で、あなたの入力をラップし、次のクラスを追加します"

これらの2つの要素の間で、列は最大12個まで追加されるので、ブートストラップグリッドシステムでは、それらは同じ行になります。

（私もちょうどこの記事の詳細きちんと表示するための容器でこれを包ん）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 

 
<div class="container"> 
 
<form class="form-horizontal"> 
 
    <fieldset> 
 
     <div class="form-container"> 
 
      <div class="form-group"> 
 
       <label class="col-lg-2 col-md-2 col-sm-2 col-xs-2 control-label">Search by:</label> 
 
       <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"> 
 
        <input class="form-control" type="text"> 
 
       </div> 
 
       <label class="col-lg-2 col-md-2 col-sm-2 col-xs-2 control-label">Something:</label> 
 
       <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"> 
 
        <input class="form-control" type="text"> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </fieldset> 
 
</form> 
 
</div>