Question

我今天早上已经从Bootstrap 3.0.0更改为3.2.0，因为我需要为我的Web应用程序提供一些新功能。在看到.form-horizontal形式的复选框垂直对齐问题之前，所有内容似乎都按预期工作。

http://www.bootply.com/AYN64feYze提供了一个示例。这个最小例子的标记是：

<div class="form-horizontal">
    <div class="form-group">
      <label class="col-sm-2 control-label">With label text</label>
          <div class="col-sm-10">
            <div class="checkbox">
              <label>
                  <input type="checkbox"> label text
              </label>
            </div>
          </div>
    </div>
  <div class="form-group">
      <label class="col-sm-2 control-label">Without label text</label>
          <div class="col-sm-10">
            <div class="checkbox">
              <label>
                  <input type="checkbox">
              </label>
            </div>
          </div>
    </div>
</div>

如果复选框没有后续文本，则会将其移到它应该出现的行的下方。

这个问题有解决方法吗？由于我已经拥有领先的标签，因此我的复选框不需要以下文字。我目前的解决方法是向包含<label>的{{1}}添加文字，并使用背景颜色作为字体颜色来隐藏文字。

感谢您的帮助。

Answer 1

我不确定这是否会影响表单布局的其余部分，但如果您更改<label>的显示属性（当前设置为inline-block），问题似乎已得到解决到：

label{
    display:inline;
}

这里是updated Bootply。希望这可以帮助！如果您有任何问题，请告诉我。

Answer 2

这对我有用：

<div class="form-group">
    <div class="col-lg-3">
        <label class="pull-right" for="MyCheckBox">My Checkbox</label>
    </div>
    <div class="col-lg-9">
        <input type="checkbox" name="MyCheckBox">
    </div>
</div>

首先，我必须删除<div class='checkbox'>元素。然后，我对复选框标签元素进行了以下更改：

将标签放在自己的列div <div class="col-lg-3"></div>
删除class =＆＃34; control-label＆＃34;
添加class =＆＃34; pull-right＆＃34;。

我最终得到了一个复选框，该复选框水平对齐其他输入并垂直标签。

Answer 3

如果您不需要为复选框添加以下文字，为什么不删除复选框周围的<label>。像这样。

<div class="form-horizontal">
    <div class="form-group">
      <label class="col-sm-2 control-label" for="check1">With label text</label>
          <div class="col-sm-10">
            <div class="checkbox">
                  <input type="checkbox" id="check1">
            </div>
          </div>
    </div>
  <div class="form-group">
      <label class="col-sm-2 control-label" for="check2">Without label text</label>
          <div class="col-sm-10">
            <div class="checkbox">
                  <input type="checkbox" id="check2">
            </div>
          </div>
    </div>
</div>

当我尝试使用时，此代码似乎在您的Bootply中有效。

请记住，如果您有一个标签可以为屏幕阅读器使用for属性，并使您的用户更容易（他们只需点击标签而不是复选框）。

Bootstrap形式 - 没有标签文本的复选框的水平垂直对齐

3 个答案: