紡紗圖標，編輯框旁

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>