我試圖讓自舉程序網站無響應,因爲the official guide,並且與內聯表單發生衝突。引導程序中的無響應行內表單3
.form-control
.form-inline
在屏幕寬度較小時會突然變長,並將下一個元素推送到下一行。對我來說,這太響應了。
在CSS中挖掘後,我發現它與Bootstrap中響應媒體查詢的設置有關。但我對前端很陌生,不知道如何解決它。
下面是一個示例,請嘗試調整瀏覽器的大小。
http://codepen.io/anon/pen/khBos
我試圖讓自舉程序網站無響應,因爲the official guide,並且與內聯表單發生衝突。引導程序中的無響應行內表單3
.form-control
.form-inline
在屏幕寬度較小時會突然變長,並將下一個元素推送到下一行。對我來說,這太響應了。
在CSS中挖掘後,我發現它與Bootstrap中響應媒體查詢的設置有關。但我對前端很陌生,不知道如何解決它。
下面是一個示例,請嘗試調整瀏覽器的大小。
http://codepen.io/anon/pen/khBos
這是Bootstrap的一部分,如果你看一看Bootstrap Docs中的內聯表單示例並且玩弄屏幕寬度,你會看到sa我的事情發生了。
這是設計出來的,因爲如果在移動設備的同一行上有一堆非常小的輸入,它將會是一個非常差勁的用戶體驗。在移動設備上填寫表格並不容易,所以更多的空間通常會更好。
但是,如果你想改變這一點,你可以添加以下到你的CSS,這隻會影響您的form-groups
一個form-inline
類中:
.form-inline .form-group{
display:inline-block;
width: auto;
}
確保您的樣式負荷後bootstrap.css
並添加以下代碼:
.form-group{display:inline-block}
.form-inline .form-control, input, .btn {
display: inline-block !important;
width: auto;
vertical-align: middle;
}
這樣,所有的元素將獲得inline-block
屬性(您可能需要添加文本區域,選擇等,但它取決於你和你的需求)
我自己找到了一種方法來通過在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