Can't "pull-right" icon glyph in bootstrap

Question

I want to pull right icon glyph in drop down menu like as below

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

But when I run this code on FireFox (Chrome and IE are oke), "icon-arrow-right" and "2-level Dropdown" aren't same a line . How can I fix it ?

Full code on JSFIDDLE

This is a [known bug](https://bugzilla.mozilla.org/show_bug.cgi?id=50630). There is a solution using `inline-block` [here](http://stackoverflow.com/questions/15102575/firefox-unexpected-line-break-using-floats-overflow-hidden), but I couldn't get it to work in your JSFiddle — Bojangles, Jul 30 '13 at 14:28
Why not use the built in .`dropdown-submenu` class? From the bootstrap documentation: "Add an extra level of dropdown menus, appearing on hover like those of OS X, with some simple markup additions. Add .dropdown-submenu to any li in an existing dropdown menu for automatic styling." — Schmalzy, Jul 30 '13 at 14:38

score 18 · Answer 1 · answered Jul 30 '13 at 14:33

18

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

jsfiddle

answered Jul 30 '13 at 14:33

cetver

11,279
5
36
56

It still occurs [ERROR](http://jsfiddle.net/2Smgv/2634/) . Your code only runs on Chrome (FireFox and IE are fail) – Toan Nguyen Jul 31 '13 at 09:15
This may require a `.clearfix` element after the floats to get hover backgrounds working again. – isherwood Apr 11 '14 at 15:48

score 7 · Accepted Answer · edited May 23 '17 at 12:34

7

The solution from cetver works well for me.

For the record though, here's another way to get the same results:
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;
}

edited May 23 '17 at 12:34

Community

1
1

answered Jul 30 '13 at 15:52

David Taiaroa

25,157
7
62
50

Can't "pull-right" icon glyph in bootstrap

2 Answers2