Bootstrap表单水平垂直对齐复选框（不带标签文本） [英] Bootstrap form-horizontal vertical alignment of checkboxes without label text

问题描述

今天早上我已从Bootstrap 3.0.0更改为3.2.0，因为我需要Web应用程序的一些新功能。一切似乎都按预期进行，直到我观察到 .form-horizo​​ntal 形式的复选框的垂直对齐问题。

I have changed from Bootstrap 3.0.0 to 3.2.0 this morning because I needed some of the new features for my web application. Everything seemed to work as expected until I observed an issue with the vertical alignment of checkboxes in a .form-horizontal form.

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

An example is available at http://www.bootply.com/AYN64feYze. The markup for this minimum example is:

<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>

如果复选框没有以下文本，则将其移至应显示的行下方。

If a checkbox has no following text it is shifted below the row it should appear in.

是否有解决此问题的方法？由于我已经有了前导标签，因此我的复选框不需要以下文字。我当前的解决方法是向包含< input type = checkbox> < label> 添加文本>，并使用背景色作为字体颜色来隐藏文本。

Is there a solution to this problem? Since I already have the leading label I do not need a following text for my checkboxes. My current workaround is adding text to the <label> that contains the <input type="checkbox"> and use the background color as the font color to hide the text.

感谢您的帮助。

推荐答案

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

I'm not sure if this will affect the rest of your form layout, but the issue seems to be resolved if you change the display attribute of <label> (currently set to inline-block) to:

label{
    display:inline;
}

这是一个更新了Bootply 。希望这可以帮助！让我知道是否有任何疑问。

Here's an updated Bootply. Hope this helps! Let me know if you have any questions.

这篇关于Bootstrap表单水平垂直对齐复选框（不带标签文本）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！