如何更改药丸的CSS? (angular2)

时间:2017-09-01 17:16:57

标签: html css angular ng-bootstrap

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

然而,我现在陷入困境:我无法改变药丸的风格,它们看起来像这样: enter image description here

但我希望他们这样:

desired

它看起来很简单,我只需要水平显示它们并保持红色背景!

这是我的代码:

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

1 个答案:

答案 0 :(得分:0)

<强>更新

感谢网站链接能够重新创建您想要的内容。添加这个CSS,它会工作。

<强>旧

请查看如何应用CSS的示例,我尽力复制图片,您可以在Plunkr

内找到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; } 中的样式

hub CLI

<强> CSS:

{{1}}