在 chrome 和 firefox 中:
form-inline
导致标签向下移动,并且复选框和标签之间的空间比使用form-horizontal
时更窄。form-horizontal
完美显示
Here's a demo in jsFiddle
这是一些代码:
<form class="form-inline">
<div class="checkbox">
<label>
<input type="checkbox"/> Test againn
</label>
</div>
</form>
这是一个截图:
有没有办法让复选框在两个浏览器中都正确对齐,或者我是否遗漏了什么?
最佳答案
这实际上是所有浏览器的问题(我已经测试过)
这是一个屏幕截图 - 我添加了一个灰色边框,这样更容易看出它没有对齐。
Here's a demo that reproduces the issue
问题发生在 inline form在大于 768px
的屏幕上。
特别是,弄乱对齐的是这个 line of forms.less (用 this commit 引入):
float: none;
天真地,将此值设置回 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
除此之外,您只需调整 CSS
关于css - Bootstrap 3 表单复选框标签与 Chromium + Firefox 中的复选框输入不对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24398901/