不能“右拉”在引导图标字形

我想拉右边的图标字形在下拉菜单中像下面不能“右拉”在引导图标字形

<div class="navbar"> 
    <div class="navbar-inner"> 
    <ul class="nav"> 
     <li class="dropdown"> 
     <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a> 
     <ul class="dropdown-menu"> 
      <li> 
      <a href="#">2-level Dropdown <i class="icon-arrow-right pull-right"></i></a> 
      <ul class="dropdown-menu sub-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><a href="#">Another action</a></li> 
      <li class="divider"></li> 
      <li><a href="#">One more separated link</a></li> 
     </ul> 
     </li> 
    </ul> 
    </div> 
</div>

但是，当我运行火狐代码（Chrome和IE都OKE ），“icon-arrow-right”和“2-level dropdown”不同于一行。我该如何解决它？

Full code on JSFIDDLE

来源

2013-07-30 Toan Nguyen

这是一个[已知的bug（HTTPS： //bugzilla.mozilla.org/show_bug.cgi?id=50630）。有一种解决方案使用'inline-block' [here]（http://stackoverflow.com/questions/15102575/firefox-unexpected-line-break-using-floats-overflow-hidden），但我无法得到它在JSFiddle中工作 – Bojangles

为什么不使用内置的''dropdown-submenu'类？从bootstrap文档中：“添加一个额外的下拉菜单，出现在像OS X那样的悬停上，并添加一些简单的标记。将添加.dropdown-submenu添加到现有下拉菜单中的任何li以进行自动样式设置。” – Schmalzy

从cetver很适合我的解决方案。

虽说记录，这里是另一种方式来得到相同的结果：
http://www.bootply.com/70536

HTML

<a href="#"><i class="icon-arrow-right"></i> 2-level Dropdown</a>

CSS

.icon-arrow-right { 
float: right; 
margin-top: 2px; 
margin-right: -6px; 
}

来源

2013-07-30 15:52:44

<a href="#" style="overflow: hidden;"> 
    <span class="pull-left">2-level Dropdown</span> 
    <span class="icon-arrow-right pull-right"></span> 
</a>

jsfiddle

来源

2013-07-30 14:33:47 cetver

它仍然会出现[错误]（http://jsfiddle.net/2Smgv/2634/）。您的代码仅在Chrome上运行（FireFox和IE失败） –

这可能需要在浮动之后使用'.clearfix'元素才能使悬停背景重新运行。 – isherwood

不能“右拉”在引导图标字形

回答

相关问题