Бутстрап 3 глификонов в дополнение

Ответ 1

Да, это кажется ошибкой для моего: Это ошибка: https://github.com/twbs/bootstrap/issues/10936

Я сначала прочитал этот https://github.com/twbs/bootstrap/issues/9850.

Я использую этот код для этого:

<div class="container"> 
<br>
<div class="input-group">
  <span class="input-group-addon glyphicon glyphicon-star"></span>    
  <input type="text" class="form-control" placeholder="Username">
</div>
<br>
<div class="input-group input-group-sm">
  <span class="input-group-addon glyphicon glyphicon-star"></span>    
  <input type="text" class="form-control" placeholder="Username">
</div>
<br>
<div class="input-group input-group-lg">
  <input type="text" class="form-control" placeholder="Username">
  <span class="input-group-addon glyphicon glyphicon-star"></span>    
</div>
<br>
<div class="input-group">
  <input type="text" class="form-control" placeholder="Username">   
  <span class="input-group-addon glyphicon glyphicon-star"></span>    
</div>
<br>
<div class="input-group input-group-sm">
  <input type="text" class="form-control" placeholder="Username">
  <span class="input-group-addon glyphicon glyphicon-star"></span>    
</div>
<br>
<div class="input-group input-group-lg">
  <input type="text" class="form-control" placeholder="Username">
  <span class="input-group-addon glyphicon glyphicon-star"></span>    
</div>
<br>
<div class="input-group input-group-lg">
  <input type="text" class="form-control" placeholder="Username">
  <span class="input-group-addon"><span class="glyphicon glyphicon-star"></span></span>    
</div>
<br>
</div>

Результаты для Firefox:

:

Будет проблема для input-group-lg, двойной интервал сделает вход более длинным (из-за .glyphicon: empty), но не устранил проблему. Я также не нашел .glyphicon{ ...; top: 1px; ...} вызвал эту проблему.

Для firefox я нашел это решение:

из bootstrap.css:

.input-group-lg > .form-control,
.input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .btn {
  height: 45px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 6px;
}

Изменение вертикальной прокладки от 10px до 9px решило проблему.

Эти правила css исходят из forms.less(.input-lg() call from inputgroups.less) используя @padding-large-vertical: 10px; (from variables.less)

В google chrome я нашел такую ​​же проблему, для всех размеров:

В этом случае это помогает использовать двойной диапазон:

`<span class="input-group-addon"><span class="glyphicon glyphicon-star"></span></span>` 

Ответ 2

Чтобы уточнить ответ Bass, с текущей версией Bootstrap 3, вам нужно всего лишь:

<div class="input-group input-group-lg">
  <input type="text" class="form-control">
  <span class="input-group-addon"><span class=" glyphicon glyphicon-star"></span></span>
</div>

Другими словами, просто базовая разметка Bootstrap, как описано в документах.

Ответ 3

<div class="input-prepend input-append">
    <span class="add-on"> <i class="icon-user"></i></span>
    <input class="span2" id="appendedPrependedInput" type="text">
    <span class="add-on"> <i class="icon-envelope"></i></span>
</div>

Ответ 4

Локальное переопределение:

<style type="text/css">
    .glyphicon {
        top: 0;
    }
</style>

Ответ 5

Я зафиксировал его с помощью

.glyphicon{ line-height: 1em; }

Ответ 6

внутри кнопки помещают html-код '& nbsp'

& nbsp

Ответ 7

<span class="input-group-addon"><i class="glyphicon glyphicon-user glyphicon-color"></i></span>

Ответ 8

Я исправил это, добавив эту "позицию: начальную" в стиль span, в котором живет глификон. Или вы можете использовать css, как это.

.glyphicon {
  position: initial;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="form-group">
  <div class="input-group">
    <span class="input-group-addon glyphicon glyphicon-tags" style="position:initial"></span>
    <input type="text" class="form-control" placeholder="Tags" />
  </div>
</div>

Ответ 9

Старый пост, но он может помочь кому-то: я использую кнопку, и она отлично работает!

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