Question

我尝试在the official guide之后使我的引导网站无响应，并且在使用内联表单时遇到一些困难。

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

在css中挖掘后，我注意到它与Bootstrap中对媒体查询的响应设置有关。但我是前端的新手，并且不知道如何解决这个问题。

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

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

Answer 1

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

这是设计的，因为在移动设备的同一条线路上拥有一堆非常小的输入将是一个非常糟糕的用户体验。在移动设备上填写表单并不容易，因此通常更好的空间。

但是，如果您想更改此设置，可以在CSS中添加以下内容，这只会影响form-groups课程中的form-inline：

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

<强> Bootply Demo

Answer 2

确保您的样式在bootstrap.css之后加载并添加以下代码：

.form-group{display:inline-block}
.form-inline .form-control, input, .btn {
    display: inline-block !important;
  width: auto;
  vertical-align: middle;

}

这样所有元素都将获得inline-block属性（您可能需要添加textarea，select等，但它可以满足您和您的需求）

Bootstrap 3中的无响应内联形式

2 个答案: