如何在bootstrap导航栏中的文本下创建居中标签

Question

我有一个像以下

的引导导航栏

<div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li><a href="/br/nd"><i class="fa fa-upload"></i>link1</a></li>
            <li><a href="/brand/all/show">link2</a></li>
            <li><a href="/trans_t"><i class="fa fa-random"></i>link3</a><span class="label label-info">1</span></li>
        </ul>
</div>

当前的scenerio如下所示

是否有可能1泡沫直接在文本买卖在线...目前它甚至走出导航栏

Answer 1

因此它不会干扰流量，在小视口上元素是绝对的位置，因为导航栏中的链接是一个块而我不想惹恼它。在较大的视口上，它位于文本下方。需要一个包装器才能做到这一点。

演示：http://jsbin.com/gozumi/1/

HTML

    <header class="navbar navbar-static-top navbar-default" id="top" role="banner">
  <div class="container">
    <div class="navbar-header">
      <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="../" class="navbar-brand">Brand Name</a>
    </div>
    <nav class="collapse navbar-collapse" role="navigation">
      <ul class="nav navbar-nav">
            <li><a href="/br/nd"><i class="fa fa-upload"></i> link1</a></li>
            <li><a href="/brand/all/show">link2</a></li>
            <li><a href="/trans_t"><i class="fa fa-random"></i> Some Words Go Here</a><span class="label-wrap"><span class="label label-info">1</span></span></li>
      </ul>
    </nav>
  </div>
</header>  

CSS

.navbar-nav .label-wrap {
    position: absolute;
    right: 15px;
    top: 8px;
    height: 10px;
}
@media (min-width:768px) { 
    .navbar-nav .label-wrap {
        clear: both;
        float: left;
        height:auto;
        position: static;
        width: 100%;
        text-align: center;
        margin-top: -10px;
        padding-bottom: 10px;
    }
}

Answer 2

很简单！

将你的标签放在你的锚中：

从：

<li><a href="/trans_t"><i class="fa fa-random"></i>link3</a><span class="label label-info">1</span></li>

为：

<li><a href="/trans_t"><i class="fa fa-random"></i>link3 <span class="label label-info">1</span></a></li>

http://jsfiddle.net/cfvbea19/