引導程序中的無響應行內表單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

回答

相關問題