Verhindern Kontrolle voran mit form-inline

Question

Ich benutze Klasse, die alle Steuerelemente in die gleiche Zeile gesetzt, aber ich habe festgestellt, dass, wenn ich die Größe des Fensters die Schaltfläche neben dem Textfeld in die nächste Zeile wechseln. Ich möchte das verhindern. Werfen Sie einen Blick auf das Bild:

und dies ist der Code:

<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

Sie wollen werden die BootstrapButton Addons unter Eingangsgruppen verwenden. Auf diese Weise bleibt es während einer Fenstergrößenänderung proportional. Achten Sie darauf, dass Ihre Eingabe und Taste verwenden die gleiche Größe:

<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>