Searchbar顯示不正確 - bootstrap＆rails

Question

我試圖在我的網站上放置一個帶有三個按鈕的搜索欄。按鈕代表3種不同的搜索（所以它們更像是切換）。

我嘗試這樣的代碼，但作爲預期的輸出不是：

<div class="row search-row"> 
    <div class="col-lg-6"> 
    <div class="input-group"><span class="input-group-btn"><button class="btn btn-default" type="button"> 
     <span class="glyphicon glyphicon-search"></span></button></span><span class="input-group-btn"><button class="btn btn-default" type="button"> 
     <input id="file-button" src="text.png" type="image"></button></span><span class="input-group-btn"><button class="btn btn-default" type="button"> 
     <span class="glyphicon glyphicon-file"></span> 
    </button></span><input class="form-control" type="text"><span class="input-group-btn"><button class="btn btn-default" type="button" value="Go"></button></span> 
    </div> 
    </div> 
</div> 

這裏是一個截屏，上面是未經編輯的，底部我想提請注意的問題：

如何獲得按鈕和文本看起來都像相同的輸入（齊平，沒有顛簸）？

Answer 1

此代碼修復它：

<div class="container"> 
    <div class="row search-row"> 
    <div class="container col-lg-6"> 
     <div class="input-group"><span class="input-group-btn"><button class="btn btn-default" type="button"> 
     <span class="glyphicon glyphicon-search"></span></button><button class="btn btn-default" type="button"> 
     <input id="file-button" src="text.png" type="image"></button><button class="btn btn-default" type="button"> 
     <span class="glyphicon glyphicon-file"></span> 
     </button></span><input class="form-control" type="text"><span class="input-group-btn"><a class="btn btn-default go-search" href="#">Go</a></span> 
     </div> 
    </div> 
    </div> 
</div> 

截圖：

基本上，應該有左側的所有按鈕一個按鈕組跨度。我改變了「去」按鈕作爲鏈接，因爲那是我真正需要它的東西。