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

Answer 3

如何将<label>放在这样的复选框之前？ ..

<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">
        <label>test</label>
        <input type="checkbox">
      </div>
    </div>
  </div>

Bootply：http://bootply.com/86998

Answer 4

我刚刚在bootstrap 3中解决了这个问题，只需将内联复选框的高度限制为12像素即可。它们默认是40px，我不知道为什么！

<div class="checkbox-inline">
    <label>
        <input type="checkbox" checked="checked" />
        <span>My correctly aligned check-box</span>
    </label>
</div>

在你的css文件中添加它（我个人有一个名为bootstrap-custom.css的css文件）：

/*
Checkboxes in inline forms are misaligned because for an unknow reason they inherit a height of 40px !
This selector limit the height of inline checkboxes to 12px which is the perfect value to align them to
the other widgets in an inline form.
*/
.radio-inline, .checkbox-inline {
    max-height: 12px;
}

Answer 5

不理想的解决方案，但将代码更改为...

<div class="span5">
    <input type="checkbox">test description</input>
  </div>

并设置margin-top。我会按你的意愿结果 - 更好。