Bootstrap mit benutzerdefinierter Schriftgröße und Eingabegruppe

Question

Ich benutze ein benutzerdefiniertes Bootstrap mit Schriftgröße von 13px und Zeilenhöhe 1,538461538 (20/13), wie Sie here sehen konnten.

Wenn ich jedoch Eingabegruppe mit Eingabegruppe-Btn verwenden, sind die Elemente nicht ausgerichtet, wie Sie here suchen können.

Wie sollte ich das Bootstrap mit einer 13px Schriftgröße arbeiten und die Ausrichtung der Komponenten beibehalten? Der Basic-Code der Komponente mit der Eingangsgruppe ist:

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-xs-4 form-group"> 
     <label>Foo</label> 
     <div class="input-group"> 
     <input type="text" class="form-control" value="" /> 
     <div class="input-group-btn"> 
      <button type="button" class="btn btn-default">Go!</button> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 1

Use "Höhe: 100%" für diese CSS Abschnitt

.input-group .form-control:first-child, .input-group-addon:first-child, .input-group-btn:first-child>.btn, .input-group-btn:first-child>.btn-group>.btn, .input-group-btn:first-child>.dropdown-toggle, .input-group-btn:last-child>.btn:not(:last-child):not(.dropdown-toggle), .input-group-btn:last-child>.btn-group:not(:last-child)>.btn 

die Hüllklasse "Input-Gruppe", die Höhe 34 Pixel aufweisen . Also müssen alle Ihre Eingaben diese Größe haben, um perfekt auszurichten.

Answer 2

Die Lösung besteht darin, den Faktor der Zeilenhöhe um einen Wert größer als die Zielgröße (20px) anzupassen, wenn sie mit der Schriftgröße (13px) multipliziert wird. In meinem Fall sollte 1,538461538 1,538461539 sein.