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。

希望这可以帮助

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

我刚刚在引导程序 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 4

在这样的复选框之前放置一个怎么<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>

引导层： http ://bootply.com/86998

Answer 5

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

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

并设置margin-top。我会如你所愿 - 更好。