如何更改藥丸的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; 
}