css - 如何在 Bootstrap 导航栏中的文本下制作居中标签

Question

我有一个 Bootstrap 导航栏，如下所示

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

当前场景如下所示

是否有可能 1 气泡直接位于在线买卖文本下方...目前它甚至超出了导航栏

Answer 1

为了不干扰流程，在小视口(viewport)上元素是绝对位置的，那是因为导航栏中的链接是一个 block ，我不想弄乱它。在较大的视口(viewport)上，它位于文本下方的中心。需要一个包装器来执行此操作。

演示: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;
    }
}