html - Bootstrap 复选框输入垂直对齐

Question

使用 Bootstrap 版本 2.3.2，我有一个如下图所示的表单布局，并且由于复选框有一个内联标签，所以存在对齐问题。

向 input[type="checkbox"] 添加边距只会为复选框提供边距，而不是内联标签。如何使复选框及其标签与旁边的文本字段垂直对齐？

这是 JS BIN如果你有兴趣。

Answer 1

在您的 HTML 中添加一个类来处理复选框边距:

 <div class="container-fluid">
  <div class="row-fluid">
    <div class="span3">
      <label>label 1</label>
      <input type="text" />
    </div>
    <div class="span3">
      <label>label 2</label>
      <input type="text" />
    </div>
    <div class="span3 checkbox">
        <input type="checkbox" />test description
    </div>
  </div>
</div>

在您的 CSS 中:

input[type="checkbox"] {
 // i just remove this part..
}
.checkbox {
  margin: 30px 0 0 0;
}

不要将边距放在复选框上，而是放在父 div 上。检查这个jsFiddle .

希望对你有帮助