Выравнивание полей формы в Twitter Bootstrap

Question

Мне сложно определить, как выровнять несколько полей форм с помощью Bootstrap, чтобы они хорошо отображались на странице.

Вот простая форма, как, например, с сопутствующим 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

Используйте Bootstrap 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 программируете. Но, возможно, это не так серьезно.