嘰嘰喳喳bootstrap：圖標（右浮）下拉導航欄菜單不能正確顯示

我想在下拉菜單中包含一個圖標。該圖標導致菜單顯示不正確（它出現在菜單欄和菜單上正在重複該圖標）。片段：嘰嘰喳喳bootstrap：圖標（右浮）下拉導航欄菜單不能正確顯示

<div class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="navbar-inner"> 

    <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 

    <a class="brand" href="#">Project X</a> 

    <div class="nav-collapse"> 
     <ul class="nav"> 
     <li class="active"><a href="#">Home</a></li> 

     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
      Menu 1 
      <b class="caret"></b> 
      </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> 
      <li class="divider"></li> 
      <li class="nav-header">Nav header</li> 
      <li><a href="#">Separated link</a></li> 
      <li><a href="#">One more separated link</a></li> 
      </ul> 
     </li> 
     </ul> 

     <ul class="nav pull-right"> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
      Menu 2 
      <b class="caret"></b> 
      </a> 
      <ul class="dropdown-menu"> 
      <li><i class="icon-off"><a href="#">Logout</a></li> 
      </ul> 
     </li> 
     </ul> 
    </div> 

    </div> 
</div>

任何想法是什麼原因造成的？

來源

2012-11-14 Homunculus Reticulli

您需要關閉標籤。

<i class="icon-off"></i>

來源

2012-11-14 18:37:01 Sara

哎呀，是我不好。第二雙眼睛在這些時候總是很有用:) tx！ –

嗯，我試過，所有雖然顯示的菜單看起來比以前更好，但它仍然看起來有點奇怪，因爲圖標在菜單中強制換行，即一個圖標顯示在一行上，菜單文本顯示在圖標下方的一條線......怪異的，我從來沒有見過。我首先嚐試了'

' Sign Out

'像你建議的那樣，然後'

>Sign Out

'都導致了奇怪的外觀菜單。任何想法我可能做錯了什麼？ –

對不起是一個痛苦的薩拉（我不是一個真正的Web開發人員） - 你能否詳細說明一個示例元素？例如我的意思是，我應該如何修改這樣的菜單項：例如：'

Sign Out

'？ –

這爲我工作

<li> <a href="#"> <i class="icon-off"> </i> Sign Out </a> </li>

來源

2013-05-19 13:50:31 korosmatick

嘰嘰喳喳bootstrap：圖標（右浮）下拉導航欄菜單不能正確顯示

回答

相關問題