在chrome和firefox中:
> form-inline导致标签向下移动,复选框和标签之间的空间比使用form-horizontal时窄.
>形式 – 水平显示完美
这里有一些代码:
<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在大于768像素的屏幕上时,会出现此问题.
特别是,从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