自定義字體缺省插入符號在Bootstrap導航欄中的位置

在導航欄中使用帶自定義字體的Bootstrap 3時，carot的位置不會與文本保持垂直對齊。自定義字體缺省插入符號在Bootstrap導航欄中的位置

我沒有使用任何自定義類 - 只是li分別.active和.dropdown元素，只有font-family改變。我想這個問題與字體的高度本身有關。

我該如何解決這個問題，而不是黑客carot的立場？我用LESS構建Bootstrap，所以如果有任何相關的變量對應於基本字體高度（或者可能是行高），請告訴我。

編輯：提供了代碼示例（只是一個普通的導航欄）

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

來源

2017-06-12 Selenir

您正在使用的自定義字體？代碼示例？請提供代碼 –

。 –

用代碼示例編輯問題。我正在使用[Stolzl字體]（https://www.myfonts.com/fonts/northernblock/stolzl/）。 – Selenir

插入符號已在自舉類。我會建議使用它進行定位。

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

來源

2017-06-12 21:47:18 Josh

我正在使用脫字符號類。閱讀代碼示例。 – Selenir

不知道我明白你的意思是「盜用Carot的位置」。如果您不想修改核心引導程序CSS並使其影響整個站點的所有插入符號，則可以（1）爲引導覆蓋創建單獨的CSS文件，或者（2）將線添加到現有的非易失性存儲區，引導CSS文件。然後，您可以限定您的CSS，使其僅適用於導航。可能是這樣的： 'nav.navbar ul.navbar-nav .caret {margin-top：-3px}' – Josh

你可以把插入符跨度：

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

來源

2017-06-12 21:48:06 kblau

這是一個hackfix僅適用於脫字號。我相信這個問題與字體本身的高度有關。如果它打破了別的什麼呢？我正在尋找修復它的解決方案，而不會干擾脫口秀課堂。 – Selenir

@Selenir我增加了風格的字體大小：大，並且插入符號垂直對齊。你能告訴我們你使用的自定義CSS字體嗎？ – kblau

自定義字體缺省插入符號在Bootstrap導航欄中的位置

回答

相關問題