ブートストラップの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

、ブートストラップインラインフォームが常に

（ドキュメント http://getbootstrap.com/css/#forms-inlineから）XSに崩壊するデフォルトで起こるように私は、全体のフォーラムが崩壊したことがないようにしたいが、そのサイズを変更します

フォームに.form-inlineを追加します（これは、 の左揃えおよびインラインブロックコントロール用には必須ではありません）。 これは、少なくとも768px幅のビューポート内のフォーム にのみ適用されます。あなたはそれがplunk作業

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

を折りたたむことは決してありませんので、それらをオーバーライドする必要が

：https://plnkr.co/edit/KFvIrUSwioIwWG6hZAA1?p=preview