Failing to align badges to right in drop-down bootstrap3 navbar

Question

Trying to align badges to the right of each drop-down menu. Currently, the badges look like so:

with the associated code:

            <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="dropdown ">
                    <a data-target="/business" href="/business" class="dropdown-toggle" data-toggle="dropdown">Business<b class="caret"></b></a>
                    <ul class="dropdown-menu">

                        <li >
                            <a href="/economy">Economy <span class='badge' today: 2</span></a>
                        </li>
                        <li >
                            <a href="/financials">Financial Reports <span class='badge' today: 78</span></a>
                        </li>
                        <li >
                            <a href="/interest">Interest Rates </a>
                        </li>

                    </ul>
                </li>
            </ul>
         </div>

adding 'pull-right' to the badge class () causes the badges to collapse:

Also, using boostrap3, with the bootswatch cosmo template (in case that's relevant). Any ideas here?

Answer 1

You have missing closing > on the SPAN tags, your class name uses ' not " and your data-target attribute has an invalid leading slash (at least these were what I discovered when I tested it). The only way I could get it to work was a combination of fixed width for the parent UL, along with right-floated ("pull-right") badge spans.

The following tested successfully in Firefox and Chrome under Twitter-Bootstrap 3:

 <li class="dropdown ">
    <a data-target="business" href="/business" class="dropdown-toggle" data-toggle="dropdown">Business<b class="caret"></b></a>
    <ul class="dropdown-menu" style="width:250px;">
        <li>
            <a href="/economy"><span class="badge pull-right">today: 2</span>Economy</a>
        </li>
        <li>
            <a href="/financials"><span class="badge pull-right">today: 78</span>Financial Reports</a>
        </li>
        <li>
            <a href="/interest">Interest Rates </a>
        </li>
    </ul>
</li>