Bootstrap 复选框输入垂直对齐

Question

使用 Bootstrap 版本 2.3.2，我有一个如下图所示的表单布局，因为复选框有一个内联 label，所以存在对齐问题。

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

如果您有兴趣，这是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。 我会按你的意愿结果 - 更好。

Answer 6

引导程序 v5+

<!-- mt-md-4 pt-md-3 this apply margin and padding only for desktop -->

<div class="col-md-3 mb-3 md-mt-4 md-pt-3">
          <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
              <label class="form-check-label" for="flexCheckDefault">
                Default checkbox
              </label>
        </div>