Группа ввода Bootstrap 1px diference

Question

Я использую группу ввода в модальном диалоговом окне. И кнопка на 1px меньше, чем другие элементы. Как я могу исправить это, а тем более, почему у меня есть эта ошибка? Я использую Bootstrap 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>