引導按鈕沒有與輸入字段對齊

Question

我在獲取glyphicon-search按鈕以排列引導時遇到問題。 這不是一個獨特的問題，我發現this question要求類似的事情，除了接受和慶祝的答案不適合我。就像答案，我有一個div輸入組的包裝，應該排隊的領域，但它不工作，你可以在我的jsfiddle看到：

http://jsfiddle.net/pk84s94t/

<div class="input-group"> 
    <span class="input-group-btn"> 
     <button class="btn btn-default glyphicon glyphicon-search input-sm" type="submit"></button> 
    </span> 
    <input type="text" class="form-control input-sm"> 
</div> 

Answer 1

http://jsfiddle.net/kv8n7n5g/

<div class="input-group"> 
    <span class="input-group-btn"> 
     <button class="btn btn-default" type="button"><i class="glyphicon glyphicon-search"></i></button> 
    </span> 
    <input type="text" class="form-control" placeholder="Search"> 
</div> 

你有按鈕標記內glyphicon類。

如果這樣做不起作用，您可能必須將圖標的行高改爲1.我使用的是ionicons，1.4 ... line-height將所有內容都丟掉了。

Answer 2

這很有趣。我從來沒有嘗試過使用像這樣的輸入組的按鈕，我不知道爲什麼會出現這種行爲。似乎是一個簡單的修復，但。

我加top:0現有規則.input-group-btn>.btn這已經有position: relative; ...

http://jsfiddle.net/pk84s94t/1/

編輯

雖然這確實修復行爲，雷切爾小號的答案是一個更好的解決方案它不會改變CSS規則，但在引導程序中使用適當的HTML來解決問題。

Answer 3

您遇到的問題是由於bootstrap中的圖形按鈕默認大小。但是，如果您在按鈕中放置了一些文本，則它會完全對齊，因爲現在文本按鈕的優先級高於glyphicon的默認優先級。對於我使用的文本& nbsp。現在它工作正常。

<div class="input-group"> 
    <input class="form-control" type="text"> 
    <span class="input-group-btn"> 
     <button type="submit" class="btn btn-default"> 
      <span class="glyphicon glyphicon-search"></span>&nbsp 
     </button> 
    </span> 
</div>