Bootstrap Eingabegruppe Addon Alignment Probleme

Question

Meine Eingabegruppe Addon nicht mit meiner Eingabe Textfeld ... Was mache ich falsch?

<div class="form-group"> 
    <label for="primary">Primary:</label> 
    <div class="input-group"> 
     <span class="input-group-addon glyphicon glyphicon-earphone"></span> 
     <input maxlength="20" class="form-control" name="primary" id="primary" placeholder="Primary" type="text"> 
    </div> 
</div> 

Der obige Code macht dies:

Das Addon 1px niedriger als das Textfeld ist, aber ich kann, warum nicht funktioniert!

http://www.bootply.com/iR1SvOyEGH

Answer 1

Versuchen Sie diese.

Dieses Problem kommt in Chrom ..

nur

<div class="form-group"> 

     <div class="col-md-12"> 
     <div class="col-md-1"> 
      <label for="primary">Primary:</label> 
      </div> 
      <div class="col-md-4"> 
       <div class="input-group"> 
        <span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span> 
        <input maxlength="20" class="form-control" name="primary" id="primary" placeholder="Primary" type="text"> 
       </div> 
      </div> 


      </div> 
     </div> 

Answer 2

I geändert Ihr bootply Code. This könnte tun, was Sie wollen. Anstatt form-group Klasse auf Ihrem übergeordneten Element hinzuzufügen, setzen Sie input-group Klasse und verschieben Sie die label außerhalb davon.

Edit:

Sorry, jetzt sehe ich Ihr Problem. Das Problem ist, wenn Sie Glyphicons in der Eingabegruppe verwenden. Diese stackoverflow Antwort könnte helfen.

Answer 3

Dies ist eine einfache Lösung, einige Änderungen tun: glyphicon hat eine Standardklasse in CSS mit top: 1px;

Sie müssen dies ausschalten, indem Sie Ihre eigene Klasse erstellen oder nur ändern, wenn dies der einzige Ort ist, an dem Sie Glyphon verwenden. Ich bin mir nicht sicher, warum sie dies standardmäßig tun, aber es wird definitiv deine Augen traurig machen. Das Ganze sieht wie folgt in CSS:

.glyphicon { 
    position: relative; 
    top: 1px; <----------------------------- Here is your culprit 
    display: inline-block; 
    font-family: 'Glyphicons Halflings'; 
    font-style: normal; 
    font-weight: normal; 
    line-height: 1; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale;