如何更改药丸的CSS？ （angular2）

Question

我使用ng-bootstrap中的Angular2和ng-tabset作为我的第一个网站，并设法使其工作到目前为止。

不过，我现在坚持：我不能改变丸的风格，他们是这样的：

，但我想他们是这样的：

它看起来很简单，我只需要水平显示它们并坐在红色背景下！

这里是我的代码：

<ngb-tabset type="pills" orientation="horizontal"> 
<ngb-tab title="BN™ II"> 
    <ng-template ngbTabContent> 
     <p>first visit</p> 
    </ng-template> 
</ngb-tab> 
<ngb-tab title="BN ProSpec®"> 
    <ng-template ngbTabContent> 
     <p>tab 2</p> 
    </ng-template> 
</ngb-tab> 
<ngb-tab title="IMMAGE®"> 
    <ng-template ngbTabContent> 
     <p>tab 3</p> 
    </ng-template> 
</ngb-tab> 
</ngb-tabset> 

我只能通过增加这对我的CSS文件来改变子弹的颜色：

ngb-tabset { 
    color: orange; 
} 

Answer 1

更新：

感谢该网站的链接能够重新创建你想要的。添加这个CSS，它会工作。

老：

请找到如何应用CSS的样本，我尽力复制图像，你可以找到样式style.css内Plunkr

Plunkr Demo

CSS：

ul.nav-pills .nav-item { 
    display: inline; 
} 

ul.nav-pills .nav-item > a { 
    padding: 4px 35px; 
    margin: 4px 5px; 
    color: black; 
    text-decoration: none; 
} 

ul.nav-pills .nav-item > a.active { 
    background-color: maroon !important; 
    color: white; 
}