html - 无法在下拉 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 标记，您的类名使用“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 弹性盒子做到这一点：

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

根据您的项目，您可能需要检查浏览器兼容性。

这是一个很好的解释它是如何工作的。

Answer 3

由于我没有在任何其他答案中看到它，我想添加一些内容：

不需要黑客或固定宽度......

要将徽章移动到右侧，请保持向右拉，但将徽章与display:inline-block对齐并确保分离。这适用于任何数量的文本。检查下面的演示。

引导程序 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>