CSS Bootstrap 3 表单复选框标签与 Chromium + Firefox 中的复选框输入不一致
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24398901/
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 3 form checkbox label doesn't align with checkbox input in Chromium + Firefox
提问by user21398
In both chrome and firefox:
在 chrome 和 Firefox 中：
form-inlinecauses the label to be shifted downwards and the space between the checkbox and the label is narrower than when usingform-horizontal.form-horizontaldisplays perfectly
form-inline导致标签向下移动，复选框和标签之间的空间比使用时更窄form-horizontal。form-horizontal完美展示
Here's a demo in jsFiddle
这是 jsFiddle 中的演示
Here's some code:
这是一些代码：
<form class="form-inline">
<div class="checkbox">
<label>
<input type="checkbox"/> Test againn
</label>
</div>
</form>
Here's a screenshot:
这是一个屏幕截图：
Is there a way to make the checkboxes all aligned correctly in both browsers or am I missing something?
有没有办法让复选框在两个浏览器中都正确对齐，或者我错过了什么？
采纳答案by KyleMit
This is actually an issue in all browsers (that I've tested)
这实际上是所有浏览器中的一个问题（我已经测试过）
Here's a screenshot- I added a grey border so it's easier to tell that it's not lining up.
这是一个屏幕截图-我添加了一个灰色边框，因此更容易判断它没有对齐。
Here's a demo that reproduces the issue
这是一个重现问题的演示
The issue occurs when the inline formis on a screen that is larger than 768px.
当内联表单位于大于768px.
Particularly, the thing that messes up the alignment is from this line of forms.less(which was introduced with this commit):
特别是，使对齐变得混乱的事情来自于这行 forms.less（在此提交中引入）：
float: none;
Naively, setting this value back to float: leftseems to fix the problem, but I'm not sure what other issues may arise.
天真地，将此值设置回float: left似乎可以解决问题，但我不确定可能会出现什么其他问题。
@media (min-width: 768px) {
.form-inline .radio input[type="radio"],
.form-inline .checkbox input[type="checkbox"] {
float: left;
margin-right: 5px;
}
}
Here's a working version of your code with these changes
这是带有这些更改的代码的工作版本
Other than that, you'd just have to tweak the CSS
除此之外，你只需要调整 CSS
回答by DagicCross
I got mine works after changing radio or checkboxto radio-inline or checkbox-inlineclass
我得到改变之后防雷工程radio or checkbox，以radio-inline or checkbox-inline一流
回答by Merlin
In my case none of the answers resolved the issue. This is what I did to align correctly the input with the label. A have added 2px to the margin top. In bootstrap.cssit is set to 4px. Setting it to 6px "fix" the issue.
在我的情况下，没有一个答案解决了这个问题。这就是我为将输入与标签正确对齐所做的工作。A 已将 2px 添加到边距顶部。在bootstrap.css 中它被设置为 4px。将其设置为 6px“修复”问题。
CSS
CSS
input[type=checkbox] {
margin: 6px 0 0;
}
HTML
HTML
<label class="checkbox-inline">
<input type="checkbox" value=""> Label text
</label>
