我想在下拉菜单中向右拖动图标图示符,如下所示
<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>
但当我在FireFox上运行这段代码时(Chrome和IE都是OK),"图标向右箭头"one_answers"二级下拉"不是一行。我该怎么修?
JSFIDDLE 上的完整代码
<a href="#" style="overflow: hidden;">
<span class="pull-left">2-level Dropdown</span>
<span class="icon-arrow-right pull-right"></span>
</a>
jsfiddle
来自cever的解决方案对我来说效果很好。
不过,为了记录在案,这里有另一种获得相同结果的方法:
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;
}