7

我无法弄清楚如何在导航栏中的链接旁边获取徽章并使其正确排列。

<ul class="nav">
 <li><a href="#">Home</a></li>
 <li><a href="#">Link</a><span class="badge badge-important">4</span></li>

这是我的问题的 JSFiddle 示例：http: //jsfiddle.net/pHRc9/3/

4

3 回答 3

5

尝试将 a href 的关闭放在 span 关闭之外。

<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Link <span class="badge badge-important">4</span></a></li>

更新的答案

你没有在你的问题中指定这一点。使用您已经存在的代码，并放置这个 css 对我来说没问题。

a {
    float:left !important;
}
span {
    float: left !important;
    margin-top: 10px;
}
于 2013-02-16T05:02:01.097 回答
2

不知道为什么要在链接之外使用徽章，因为整个链接都变成了一个块。将徽章放在右侧的最佳方法类似于lostintranslation的答案，但不是使用.badge-importantuse .pull-right。

于 2014-04-04T16:56:16.980 回答
1

我所做的是将徽章作为列表元素放置：

  %ul.nav.navbar-nav.navbar-right
    %li.navbar-text
      %span.badge boo
    %li.navbar-text
      %span.label.label-primary foo

这对我来说似乎很好。

于 2014-03-04T10:41:31.337 回答