Html Bootstrap 表单 - 没有标签文本的复选框的水平垂直对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24912377/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap form-horizontal vertical alignment of checkboxes without label text
提问by Thylossus
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-horizontalform.
我今天早上从 Bootstrap 3.0.0 更改为 3.2.0，因为我需要为我的 Web 应用程序添加一些新功能。一切似乎都按预期工作，直到我发现.form-horizontal表单中复选框的垂直对齐问题。
An example is available at http://www.bootply.com/AYN64feYze. The markup for this minimum example is:
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>
If a checkbox has no following text it is shifted below the row it should appear in.
如果复选框没有后续文本，它会移到它应该出现的行下方。
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>包含 的<input type="checkbox">并使用背景颜色作为字体颜色来隐藏文本。
Thank you for your help.
感谢您的帮助。
采纳答案by Serlite
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>（当前设置为inline-block）的显示属性更改为：
label{
display:inline;
}
Here's an updated Bootply. Hope this helps! Let me know if you have any questions.
这是更新的 Bootply。希望这可以帮助！如果您有任何问题，请告诉我。
回答by Nathan Agersea
This worked for me:
这对我有用：
<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>
First, I had to remove the <div class='checkbox'>element. I then made the following changes to the checkbox label element:
首先，我必须删除<div class='checkbox'>元素。然后，我对复选框标签元素进行了以下更改：
- Place the label in its own column div
<div class="col-lg-3"></div> - Remove class="control-label"
- Add class="pull-right".
- 将标签放在自己的列 div 中
<div class="col-lg-3"></div> - 删除类=“控制标签”
- 添加类=“拉右”。
I ended up with a checkbox that aligned with the other inputs horizontally and with its label vertically.
我最终得到了一个复选框，该复选框与其他输入水平对齐，标签垂直对齐。
回答by Rob Quincey
If you don't need following text for the checkboxes, why not just remove the <label>surrounding the checkboxes. Like so.
如果您不需要复选框的以下文本，为什么不删除<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>
This code appeared to work in your Bootply when I tried it.
当我尝试时，此代码似乎在您的 Bootply 中工作。
And remember if you have a label to use the forattribute for screen readers and to make it easier for your users (they can just click the label instead of the checkbox).
并且请记住，如果您有一个标签来使用for屏幕阅读器的属性并使您的用户更容易使用（他们只需单击标签而不是复选框）。
