css - Bootstrap 3 中的无响应内联表单

Question

我试图让我的 Bootstrap 网站在 the official guide 之后没有响应，并且在处理内联表单时遇到了一些困难。

.form-inline中的.form-control会在屏幕宽度变小的时候突然变得很长，将下一个元素推到下一行。对我来说，这太敏感了。

在深入研究 css 之后，我注意到它与响应媒体查询的 Bootstrap 中的设置有关。但是我是前端的新手，不知道如何修复它。

这是一个示例，请尝试调整浏览器的大小。

http://codepen.io/anon/pen/khBos

Answer 1

这是 Bootstrap 的一部分，如果您看一下 Bootstrap Docs 中的内联表单示例并调整屏幕宽度，您会看到同样的事情发生。

这是设计使然，因为在移动设备的同一行上放置一堆非常小的输入会是一个非常糟糕的用户体验。在移动设备上填写表格并不容易，因此空间越大越好。

但是，如果您想更改它，您可以将以下内容添加到您的 CSS，这只会影响您在 form-inline 类中的 form-groups:

.form-inline .form-group{
    display:inline-block;
    width: auto;
}

Bootply Demo