Question

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

badges, no pull-right

使用相关代码：

            <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”添加到徽章类（）会导致徽章崩溃：

badges with pull-right

另外，使用boostrap3，使用bootswatch cosmo模板（如果相关的话）。这里有什么想法吗？

Answer 1

您在SPAN标记上缺少结束>，您的类名称使用'not'而您的data-target属性具有无效的前导斜杠（至少这些是我在测试时发现的）。唯一能使它工作的方法是母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>

Answer 2

您可以使用CSS3 flex box执行此操作：

JSFiddle

HTML：

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
        Dropdown <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">
                <span>Something</span>
                <span class="badge">0.5</span>
            </a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">
                <span>Something else</span>
                <span class="badge">1</span>
            </a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">
                <span>Something seriously super super long</span>
                <span class="badge">1 bajillion</span>
            </a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">
                <span>Something also quite long</span>
                <span class="badge">½ bajillion</span>
            </a>
        </li>
    </ul>
</div>

CSS：

.dropdown-menu a[role="menuitem"] {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.dropdown-menu a[role="menuitem"] span:first-child {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-right: 2em;
}

根据您的项目，您可能需要查看browser compatibility.

Here很好地解释了它是如何运作的。

Answer 3

由于我没有看到其他答案中提到的内容，因此我想添加一些内容：

无需黑客攻击或固定宽度...

要将徽标移动到右侧，请保持 pull-right ，但将徽标与 display：inline-block 对齐，并确保分隔。这将适用于任何数量的文本。查看下面的演示。

Bootstrap 3.3.7

    li a { 
        /*DECORATION*/
        background-color: white; 
    }
    
    .badge { 
        /*DECORATION*/
        background-color: black; 
        color: white;
        
        /*This is important*/
        /*set container in the same line*/
        display: inline-block; 
        /*ensure a constant separation between text and badge*/
        margin-left: 10px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">



<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>




    
<div class=" dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
        Dropdown <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#" >
                <span>Economy </span>
                <span class="badge rounded-pill pull-right">today: 2</span>
            </a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">
                <span>Financial Reports </span>
                <span class="badge rounded-pill pull-right">today: 78</span>
            </a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#" >
                <span>Interest Rates</span>
                <span class="badge rounded-pill pull-right">today: 9999999</span>
            </a>
        </li>
    </ul>
</div>

对于2020年在Bootstrap 4中存在相同问题的用户，可以使用相同的解决方案。

Boostrap 4.0.0

http://jsfiddle.net/manyfatboy/bren47ya/7/

Answer 4

尝试......（未经测试）

<li >
    <a href="/economy">
        <span="pull-left">
            Economy
        </span>

        <span class="pull-right">
            <span class='badge' today: 2></span>
        </span>
    </a>
</li>

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

4 个答案: