纺纱图标，编辑框旁

Question

我正在尝试创建一个编辑框，并在其旁边有一个小的微调控件，当完成后，将显示基于按钮单击的指示“正在忙碌”。

编辑框和图标应使用容器宽度的100％（col-xs-12）。

但是，使用我当前的代码，图标会出现一个新行，编辑框跨越100％。这可能与Bootstrap？

<div class="well well-sm shadow"> 
    <div class="row"> 
     <div class="col-xs-12"> 
      <input type="search" onkeyup="doSearch(this.value)" class="form-control" /><img src="~/images/loader.gif" /> 
     </div> 
     <div class="col-md-12 col-xs-12 col-sm-4 SearchResultsBox text-right"> 
      <button class="btn btn-sm btn-info" onclick="ViewSearchResult()">View</button> 
     </div> 
    </div> 
</div> 

Answer 1

 <div class="well well-sm shadow"> 
 
     <div class="row"> 
 
      <div class="col-xs-12"> 
 
       <input type="search" onkeyup="doSearch(this.value)" class="form-control" /><img src="http://www.andrewdavidson.com/articles/spinning-wait-icons/wait24.gif" style="left:10px; position:absolute; z-index:1000;" /> 
 
      </div> 
 
      <div class="col-md-12 col-xs-12 col-sm-4 SearchResultsBox text-right"> 
 
       <button class="btn btn-sm btn-info" onclick="ViewSearchResult()">View</button> 
 
      </div> 
 
     </div> 
 
    </div>