未能在下拉bootstrap3导航栏中将徽章对齐到右侧

Question

尝试将徽章对齐到每个下拉菜单的右侧.目前,徽章看起来像这样:

使用相关代码:

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

将"pull-right"添加到徽章类()会导致徽章崩溃:

另外,使用boostrap3,使用bootswatch cosmo模板(如果相关的话).这里有什么想法？

Answer 1

您缺少>SPAN 标记的关闭，您的类名使用“而不是”，并且您的数据目标属性具有无效的前导斜杠（至少这些是我在测试时发现的）。我可以让它工作的唯一方法是父 UL 的固定宽度与右浮动（“右拉”）徽章跨度的组合。

以下在 Twitter-Bootstrap 3 下在 Firefox 和 Chrome 中测试成功：

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