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。例如：Eagle。

.form-horizontal

Answer 2

虽然Khalid的答案是正确的方法，但有时你也可能会遇到bootstrap表格的问题。最简单的方法是在标签标签后使用< br >：

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

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

在Twitter Bootstrap中对齐表单字段

2 个答案: