在chrome和firefox中:
> form-inline导致标签向下移动,复选框和标签之间的空间比使用form-horizontal时窄.
>形式 – 水平显示完美@H_502_4@
Here’s a demo in jsFiddle@H_502_4@
<form class="form-inline"> <div class="checkBox"> <label> <input type="checkBox"/> Test againn </label> </div> </form>
这是一个截图:@H_502_4@
有没有办法使复选框在两个浏览器中都正确对齐,或者我错过了什么?@H_502_4@
解决方法
这实际上是所有浏览器中的一个问题(我已经测试过)
这是一个屏幕截图 – 我添加了一个灰色边框,所以更容易说,它不排队.@H_502_4@
@H_502_4@
Here’s a demo that reproduces the issue@H_502_4@
当inline form在大于768像素的屏幕上时,会出现此问题.@H_502_4@
特别是,从line of forms.less(这是this commit引入)中混淆了这个对齐的事情:@H_502_4@
float: none;
天真地,将此值设置为float:left似乎解决了问题,但我不知道还有什么其他可能出现的问题.@H_502_4@
@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@H_502_4@
除此之外,您只需要调整CSS@H_502_4@