我正在使用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;
}
答案 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;
}
中的样式
<强> CSS:强>
{{1}}