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

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>包含的文本中添加文本,<input type="checkbox">并使用背景颜色作为字体颜色来隐藏文本.

谢谢您的帮助.

Answer 1

我不确定这是否会影响表单布局的其余部分,但是如果将<label>(当前设置为inline-block)的display属性更改为:此问题似乎已得到解决:

label{
    display:inline;
}

这是一个更新的Bootply.希望这可以帮助!如果您有任何疑问,请告诉我.