CSS Twitter Bootstrap - 内联复选框对齐问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15975968/
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
Twitter Bootstrap - Inline Checkbox Alignment issue
提问by Raoot
Driving myself crazy trying to figure this one out. I can't seem to get the checkboxes that wrap to the next line to left align properly.
试图弄清楚这一点，让自己发疯。我似乎无法让包裹到下一行的复选框正确左对齐。
Here's some sample code:
这是一些示例代码：
<label class="checkbox inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> Aaaaaaaaaa
</label>
<label class="checkbox inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> Bbbbbbb
</label>
<label class="checkbox inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> Cccccccccccccc
</label>
<label class="checkbox inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> Ddddddddd
</label>
<label class="checkbox inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> Eeeeeeeee
</label>
<label class="checkbox inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> Ffffffffffff
</label>
And here's the result:
结果如下：
Any ideas?
有任何想法吗？
回答by noel
You can override the Bootstrap 2 class by adding a no_indent class (or whatever):
您可以通过添加 no_indent 类（或其他）来覆盖 Bootstrap 2 类：
<label class="checkbox inline no_indent">
<input type="checkbox" id="inlineCheckbox1" value="option1"> Aaaaaaaaaa
</label>
and adding this to your CSS:
并将其添加到您的 CSS 中：
.checkbox.inline.no_indent,
.checkbox.inline.no_indent+.checkbox.inline.no_indent {
margin-left: 0;
margin-right: 10px;
}
.checkbox.inline.no_indent:last-child {
margin-right: 0;
}
Bootstrap 3:The checkbox inlineclasses have been reduced to a single checkbox-inlineclass. The HTML becomes:
自举3：将checkbox inline类已减少为单个checkbox-inline类。HTML 变为：
<label class="checkbox-inline no_indent">
<input type="checkbox" id="inlineCheckbox1" value="option1"> Aaaaaaaaaa
</label>
CSS:
CSS：
.checkbox-inline.no_indent,
.checkbox-inline.no_indent+.checkbox-inline.no_indent {
margin-left: 0;
margin-right: 10px;
}
.checkbox-inline.no_indent:last-child {
margin-right: 0;
}
Bootstrap 4:The checkbox-inlineclass is now form-check-inline:
引导4：本checkbox-inline类是现在form-check-inline：
<label class="form-check-inline no_indent">
<input type="checkbox" id="inlineCheckbox1" value="option1"> Aaaaaaaaaa
</label>
CSS:
CSS：
.form-check-inline.no_indent,
.form-check-inline.no_indent+.checkbox-inline.no_indent {
margin-left: 0;
margin-right: 10px;
}
.form-check-inline.no_indent:last-child {
margin-right: 0;
}
回答by Rudey
Here's a complete Bootstrap 3 solution that also fixes the same issue for radio buttons, without having to use a seperate class:
这是一个完整的 Bootstrap 3 解决方案，它也解决了单选按钮的相同问题，而无需使用单独的类：
.checkbox-inline,
.checkbox-inline + .checkbox-inline,
.checkbox-inline + .radio-inline,
.radio-inline,
.radio-inline + .radio-inline,
.radio-inline + .checkbox-inline {
margin-left: 0;
margin-right: 10px;
}
.checkbox-inline:last-child,
.radio-inline:last-child {
margin-right: 0;
}
回答by Rafael Sales
Wrapping each label+input in an <li>fixes the margin-left alignment issue with no CSS override/customization
将每个标签+输入包装在一个<li>没有 CSS 覆盖/自定义的情况下修复了边距左对齐问题
<ul>
<li>
<label class="checkbox-inline">
<input type="checkbox" value="option1"> Option 1
</label>
</li>
<li>
<label class="checkbox-inline">
<input type="checkbox" value="option1"> Option 2
</label>
</li>
</ul>
回答by EpokK
Remove inlineClass on your labelelement.
删除元素inline上的类label。
