标签: nav-pills

我正在尝试为每个标签更改活动颜色(在点击后仍然是twitter的浅蓝色):

 <ul class="nav nav-pills">
   <li class="active"><a href="#tab1" data-toggle="tab">Overview</a></li>
   <li><a href="#tab2" data-toggle="tab">Sample</a></li>
   <li><a href="#tab3" data-toggle="tab">Sample</a></li>
 </ul>

(怎么样)我可以用CSS做到这一点？

我在左窗格上有一个带有堆叠导航的菜单,点击时每个页面激活右边的其他菜单; 每个药丸都包含一个徽章,显示其自身的一些额外背景信息以及打开的内容.

<ul class="nav nav-pills nav-stacked">
  <li><a href="#tab_1" data-toggle="pill">Introduction <span class=
  "badge pull-right">0/2</span></a></li>
  <li class="active"><a href="#tab_4" data-toggle="pill">The effect of fear of humans on ease of handling of pigs <span class="badge pull-right">0/4</span></a></li>
  <li><a href="#tab_2" data-toggle="pill">Questionnaire <span class=
  "badge pull-right">0/4</span></a></li>
</ul>

我在包装药丸内容时遇到问题,我无法解决这个问题:当容器的宽度调整大小时,文本和徽章会相应地被包裹,但是有一个特定的宽度,只有徽章被包裹而不是文字,药丸的高度不会增加.

我指的是第三部分,第二部分,下图(这里是jsfiddle):

我应该使用什么标记/ CSS来保持徽章在右边对齐,同时正确包装文本留下空间？

我将我的Angular-6项目用于ng-bootstrap，并使用了ngbootstrap-pills，我尝试添加带有删除按钮选项的活动药丸以下拉图标，但是它不起作用，任何人都知道如何正确地做到这一点。

这里有堆栈闪电代码

这是我的.css代码

.nav-pills .nav-link.active, .nav-pills.show> .nav-link {
    color: #fff;
    background-color: #262262;
}

a:after {
  content: url('https://image.flaticon.com/icons/svg/60/60995.svg');
  height: 0;
  width: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #fff;
  position: absolute;
  bottom: -1px;
  left: 50%;
  margin: 0 0 0 -3px;
  z-index: 100;
}

我试图做这张照片

谢谢。