Bootstrap 3 glifosony w dodatkach

Question

Osłona to mój html (w Jade) glifów w dodatkach.

.input-group 
    input.form-control(type='text') 
    span.input-group-addon.glyphicon.glyphicon-calendar 

Jednak dodatek nie jest wyrównany z polem wprowadzania. Screeshot:

Czy to normalne, czy to błąd w bootstrap 3?

Aktualizacja

Got go: w bootstrap.css: 2171 (skompilowany z mniej)

.glyphicon{ ...; top: 1px; ...} 

błąd?

Answer 1

Tak, wydaje się błąd na moim: Jest to bug: https://github.com/twbs/bootstrap/issues/10936

czytam ten https://github.com/twbs/bootstrap/issues/9850 pierwszy.

używam tego kodu do tego:

<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> 

wyników dla Firefox:

:

Nie będzie problemem dla input-group-lg podwójna rozpiętość sprawia, że ​​wejście dłużej (z powodu. glyphicon: empty), ale nie rozwiązał problemu. Też nie znalazłem .glyphicon{ ...; top: 1px; ...} spowodował ten problem.

dla firefox i znaleźć tego rozwiązania:

z 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; 
} 

Zmiana pionowego wyściółkę od 10px do 9PX rozwiązać ten problem.

Ta zasada css pochodzi z forms.less (wywołanie .input-lg() z inputgroups.less) używając @ padding-large-vertical: 10px; (Od variables.less)

w Google Chrome znalazłem sam rodzaj problemu, dla wszystkich rozmiarów patrz:

W tym przypadku wystarczy użyć podwójnego Okres:

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

Answer 2

aby wyjaśnić odpowiedź Bass', z aktualnej wersji Bootstrap 3, wszystko co musisz zrobić, to:

<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> 

Innymi słowy, wystarczy podstawowa adnotacja Bootstrap opisana w dokumentacji.

Answer 3

Naprawiłem go z

.glyphicon{ line-height: 1em; }

Answer 4

<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> 

Answer 5

przesłanianie lokalny:

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

Answer 6

wewnątrz przycisku miejscu kod html '& nbsp'

& nbsp

Answer 7

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

Answer 8

Naprawiłem to poprzez dodanie tej "pozycji: początkowej" do stylu span, w którym mieszka glify. LUB możesz użyć css w ten sposób.

.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>

Answer 9

Stary post ale może komuś pomóc: Używam przycisk i działa idealnie!

<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>