Benutzerdefinierte Schriftart bricht Caret-Position in Bootstrap-Navigationsleiste

Question

Während Bootstrap 3 mit benutzerdefinierten Schriftart in Navbar die Position von Carot nicht vertikal ausgerichtet mit Text ausgerichtet bleibt.

Ich bin keine benutzerdefinierten Klassen - nur li Elemente mit .active und .dropdown jeweils nur font-family wurde geändert. Ich nehme an, dass das Problem mit der Schrifthöhe selbst zu tun hat.

Wie kann ich dieses Problem beheben, ohne die Position der Karotte zu hacken? Ich baue Bootstrap mit weniger, also, wenn es relevante Variablen gibt, die für etwas wie grundlegende Schrifthöhe (oder vielleicht Zeilenhöhe?) Entsprechen, lassen Sie mich wissen.

Edit: Codebeispiel Providing (nur ein gewöhnlicher navbar)

<nav class="navbar navbar-default"> 
    <div class="container"> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Home</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">About <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      </ul> 
     </li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Link <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      </ul> 
     </li> 
     </ul>   
    </div><!-- /.navbar-collapse --> 
    </div><!-- /.container --> 
</nav> 

Answer 1

Die caret bereits eine Klasse in Bootstrap hat. Ich würde empfehlen, das für die Positionierung zu verwenden.

.caret { 
    display: inline-block; 
    width: 0; 
    height: 0; 
    margin-top: -10px; 
    margin-left: 2px; 
    vertical-align: middle; 
    border-top: 4px dashed; 
    border-top: 4px solid \9; 
    border-right: 4px solid transparent; 
    border-left: 4px solid transparent; 
} 

Answer 2

Sie können die Einfügemarke in einer Spanne setzen:

<li class="dropdown"> 
       <a class="dropdown-toggle" style="font-size: large" data-toggle="dropdown" href="#">HasDropdowns<span class="caret"></span></a> 
       <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">