Bootstrap 3.1中内联表单内的表单元素的宽度

Question

我正在将我正在处理的应用程序从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%;强制设置的。另外，您应该将视口拉伸到“取消堆叠”元素，并在表单内联时查看问题。

有人帮忙吗？

Answer 1

同样在这里！更新表格3.0到3.1打破了我的一些表格。了解到这是.inline-form行为的新方式。

http://getbootstrap.com/css/#forms-inline

  

默认情况下，Bootstrap中的输入，选择和textareas是100％宽。要使用内联表单，您必须在其中使用的表单控件上设置宽度。

解决方法是不要在表单内的每个.inline-form上使用.form-control或设置宽度。网格系统对你没有帮助。

Answer 2

正如您已经注意到的那样，我不知道这是否是一个正确的答案，但我通过以下项目的基本样式恢复了bootstrap 3.0行为。

.form-inline .form-control {
  width: 100%;
}

我从同一类问题的答案中借用了这个解决方案https://stackoverflow.com/a/21471504/338986。