防止制御は、フォームインライン

Question

で先に行く私は、同じ行にすべてのコントロールを置くform-inlineクラスを使用していますが、私は、ウィンドウのサイズを変更すると、テキストボックスの近くにボタンが次の行に行くことに気づきました。私はこれを防止したい。画像を見てみましょう：

を、これはコードです：

<script src="https://code.jquery.com/jquery-2.2.4.js"></script> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
<div class="container"> 
    <div class="row"> 
    <div class="col-xs-2 hideable-sidebar"> 
     <div class="well"> 
     <span><b>Resources</b></span> 
     <form class="form-inline"> 
      <input type="text" placeholder="type text here" 
       class="form-control" id="resource_filter" /> 
      <button class="clear btn btn-default btn-sm" type="button" 
        title="clean"> 
      <span class="glyphicon glyphicon-repeat"></span> 
      </button> 
     </form> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 1

あなたが入力グループの下BootstrapButton Addonsを使用したいと思います。この方法では、ウィンドウのサイズ変更時に比例します。あなたの入力し、ボタンが同じサイズを使用していることを確認してください：

<script src="https://code.jquery.com/jquery-2.2.4.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-12 hideable-sidebar"> 
 
     <div class="well"> 
 
     <span><b>Resources</b></span> 
 
     <form class="form-inline"> 
 
      <div class="input-group"> 
 
      <input type="text" placeholder="type text here" class="form-control" id="resource_filter" /> 
 
      <span class="input-group-btn"> 
 
       <button class="clear btn btn-default" type="button" title="clean"> 
 
       <span class="glyphicon glyphicon-repeat"></span> 
 
       </button> 
 
      </span> 
 
      </div> 
 
     </form> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>