Twitterのブートストラップでフォームフィールドを整列する

Question

ブートストラップを使用していくつかのフォームフィールドを整列させてページ上にうまく表示する方法がわかりません。ここで

がfiddleを伴って、例として単純な形式である：あなたが見ることができるように

<div> 
    <select size="5"> 
    <option value="1">Option 1</option> 
    <option value="2">Option 2</option> 
    <option value="3">Option 3</option> 
    </select> 
</div> 
<div> 
    <label class="checkbox-inline"> 
    <input type="checkbox" value=""> True/False 
    </label> 
</div> 
<div> 
    <label for="description" class="col-sm-4">Description</label> 
    <input type="text" id="description" name="description"> 
</div> 
<div> 
    <label for="notes" class="col-sm-4">Notes</label> 
    <textarea rows="4" cols="50" name="notes" id="notes"> 
    </textarea> 
</div> 

、selectフィールドとcheckboxフィールドは、インラインinputとtextareaフィールドではありません。

どうすればいいですか？

ありがとうございました。

Answer 1

ブートストラップformsを使用してください。例：.form-horizontal。

<form class="form-horizontal"> 
    <div class="form-group"> 
    <div class="col-sm-offset-2 col-sm-10"> 
     <select class="form-control" size="5"> 
     <option value="1">Option 1</option> 
     <option value="2">Option 2</option> 
     <option value="3">Option 3</option> 
     </select> 
    </div> 
    </div> 
    <div class="form-group"> 
    <div class="col-sm-offset-2 col-sm-10"> 
     <div class="checkbox"> 
     <label> 
      <input type="checkbox"> True/False 
     </label> 
     </div> 
    </div> 
    </div> 
    <div class="form-group"> 
    <label for="description" class="col-sm-2 control-label">Description</label> 
    <div class="col-sm-10"> 
     <input type="text" class="form-control" id="description" name="description"> 
    </div> 
    </div> 
    <div class="form-group"> 
    <label for="notes" class="col-sm-2 control-label">Notes</label> 
    <div class="col-sm-10"> 
     <textarea class="form-control" id="notes" name="notes" rows="4" cols="50"></textarea> 
    </div> 
    </div> 
</form> 

Answer 2

ハーリドの答えが正しいアプローチではあるが、時には、あなたはまた、ブートストラップのフォームでその問題を得る可能性があります。最も簡単な方法は、ラベル・タグの後に<br>を使用することです：

<label for="notes" class="col-sm-4">Notes</label> 
    <br> 
    <textarea rows="4" cols="50" name="notes" id="notes"> 
    </textarea> 

それが最善ではない - あなたは2017 HTMLのプログラマーと呼ばれるようにしたい場合、私はagain-それを言及する必要があります。しかし、それほど深刻なことではないかもしれません。