Twitter bootstrap 在Twitter引导中对齐表单字段

我很难弄清楚如何使用Bootstrap对齐一些表单字段，以便它们在页面上很好地显示

以下是一个简单的表格作为示例，随附：

选择1
选择2
选择3
对/错
描述
笔记

如您所见，

选择

字段和

复选框

字段与

输入

和

文本区域

字段不一致

我怎样才能把每件事都安排得很好呢

谢谢您的帮助。

使用引导。例如：

.formhorizontal

<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>

选择1
选择2
选择3
对/错
描述
笔记

尽管Khalid的答案是正确的方法，但有时您也可能会在bootstrap表单中遇到这个问题。最简单的方法是在标签标签后使用

：

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

注释

如果你想被称为2017年HTML程序员，这不是最好的——我应该再次提及。但也许没那么严重

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