使搜索框不會在引導程序的xs斷點處崩潰

Question

我有一個帶有輸入元素和提交按鈕的搜索框。我正在引導。在xs斷點提交按鈕進入另一行。我想使整個論壇從來沒有崩潰，但是改變它的大小，因爲它發生在默認情況下

<form class="form-inline quick-search-form" role="form" action="search.php"> 
<div class="form-group"> 
    <input type="text" class="form-control" placeholder="Enter Keyword(s)"> 
    <button type="submit" id="quick-search" class="btn btn-custom"><span class="glyphicon glyphicon-search custom-glyph-color"></span></button> 
</div> 
<div class="pad-top-20">Examples Background, Banner, Brochure</div> 

Answer 1

默認情況下，引導直列形式將始終XS崩潰（從文檔http://getbootstrap.com/css/#forms-inline）

對於 左對齊和內嵌塊控件，在窗體中添加.form-inline（不一定是a）。 這僅適用於寬度至少爲768px的視口內的表格 。

你需要重寫他們所以它永遠不會崩潰

.form-group input{ 
    width: 80%; 
    display: inline-block; 
} 

工作普拉克：https://plnkr.co/edit/KFvIrUSwioIwWG6hZAA1?p=preview