我正在将我正在处理的应用程序从3.0版迁移到3.1版。该应用程序处于初始阶段(几乎是原型),实现的页面很少。因此,鉴于它是次要的版本号更新和应用程序的初步阶段,所以对移植没有太大的麻烦。
令我困惑的一件事就是内联表单中的控件不再占用可用宽度的100%。
在浏览器上调试我可能会注意到width: 100%;
类的.form-control
属性被覆盖了:
.form-inline .form-control {
display: inline-block;
width: auto;
vertical-align: middle;
}
我对css了解不多,但是在每个表单元素上放置width: 100%;
可以解决问题,尽管它似乎不是最好的解决方案。我无法弄清楚为什么选择器.form-inline .form-control
是使用width:auto;
创建的。
以下是问题的解答:http://jsfiddle.net/pasemes/Mw7rK/11/。请注意,第一个元素是使用width: 100%;
强制设置的。另外,您应该将视口拉伸到“取消堆叠”元素,并在表单内联时查看问题。
有人帮忙吗?
答案 0 :(得分:2)
同样在这里!更新表格3.0到3.1打破了我的一些表格。了解到这是.inline-form
行为的新方式。
http://getbootstrap.com/css/#forms-inline
默认情况下,Bootstrap中的输入,选择和textareas是100%宽。要使用内联表单,您必须在其中使用的表单控件上设置宽度。
解决方法是不要在表单内的每个.inline-form
上使用.form-control
或设置宽度。网格系统对你没有帮助。
答案 1 :(得分:1)
正如您已经注意到的那样,我不知道这是否是一个正确的答案,但我通过以下项目的基本样式恢复了bootstrap 3.0行为。
.form-inline .form-control {
width: 100%;
}
我从同一类问题的答案中借用了这个解决方案https://stackoverflow.com/a/21471504/338986。