Bootstrap輸入組1px差異

Question

我在模態對話框中使用輸入組。按鈕比其他元素少1px。我該如何解決它，更不用說爲什麼我有這個bug？我用引導3

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<div class="buttons input-group col-sm-offset-1 col-sm-9"> 
 
    <input type="number" min="1" value="1" class="form-control" /> 
 
    <span class="input-group-addon">ks</span> 
 
    <span class="input-group-btn"> 
 
     <button type="button" class="btn btn-default glyphicon glyphicon-remove color-red"/> 
 
    </span> 
 
</div>

Answer 1

它通過使用該按鈕glyphicon引起的，似乎與引導的錯誤。使用

.input-group-btn>.glyphicon {margin-top: -1px;} 

要解決它。

http://fiddle.jshell.net/85m5mwsg/2/

Answer 2

的今天這個.glyphicon

http://jsbin.com/dufisukefe/3/edit

.input-group-btn .glyphicon 
{ 
top :0px 
} 

Answer 3

我遇到刪除頂部，並且以位谷歌搜索和實驗，它似乎正確的方式使用glyphicon是總是在自己的跨度上使用圖標類，而不是將其與其他類/組件結合使用。

如果你的例子;你會做以下事情：

<span class="input-group-btn"> 
    <button type="button" class="btn btn-default color-red"> 
     <span class="glyphicon glyphicon-remove"></span> 
    </button> 
</span> 

有了這個，沒有必要對任何風格的變化。

Answer 4

對我來說，這個錯誤是因爲舍入錯誤。

有這種風格的規則

.btn { 
    line-height: 1.42857; 
} 

這應該是

.btn { 
    line-height: 1.42857143; 
} 

原來其他SASS文件中導入引導導致的精度損失。 SASS編譯過程需要標記--precision 8才能正常工作。

不過，正如在另一個答案中指出的，你只需要把你的圖標放在另一個標籤。

<span class="input-group-btn"> 
    <button type="button" class="btn btn-default color-red"> 
     <span class="glyphicon glyphicon-remove"></span> 
    </button> 
</span>