引导程序中的无响应行内表单3

我试图让自举程序网站无响应，因为the official guide，并且与内联表单发生冲突。引导程序中的无响应行内表单3

.form-control.form-inline在屏幕宽度较小时会突然变长，并将下一个元素推送到下一行。对我来说，这太响应了。

在CSS中挖掘后，我发现它与Bootstrap中响应媒体查询的设置有关。但我对前端很陌生，不知道如何解决它。

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

2014-09-04 Gordon Yuan Gao

我自己找到了一种方法来通过在bootstrap scss（我不是一个人）中设置'$ screen-sm-min：0px;'来防止这种情况发生，并且写了一篇[博客文章]（http://ghprince.github.io/2014/09/05 /truly-non-responsive-bootstrap-3.html）。但我仍然选择答案，因为使用CSS也是一个好方法。 – 2014-09-05 04:37:24

这是Bootstrap的一部分，如果你看一看Bootstrap Docs中的内联表单示例并且玩弄屏幕宽度，你会看到sa我的事情发生了。

这是设计出来的，因为如果在移动设备的同一行上有一堆非常小的输入，它将会是一个非常差劲的用户体验。在移动设备上填写表格并不容易，所以更多的空间通常会更好。

但是，如果你想改变这一点，你可以添加以下到你的CSS，这只会影响您的form-groups一个form-inline类中：

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

Bootply Demo

来源

2014-09-04 18:50:04 Dan

确保您的样式负荷后bootstrap.css并添加以下代码：

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

}

这样，所有的元素将获得inline-block属性（您可能需要添加文本区域，选择等，但它取决于你和你的需求）

来源

2014-09-04 18:35:20 Devin

引导程序中的无响应行内表单3

回答

相关问题