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.

希望这可以帮助

Answer 2

尝试总是使用这样的东西:

<div class="span3">
    <label for="checkbox" class="checkbox">
        <input type="checkbox" id="checkbox" class="checkbox">test description
    </label>
</div>

http://jsbin.com/itAdAWA/1/edit