我有一些引导标签,它们是由typescript文件中的数组生成的有角4 *ngFor
指令,
这个数组是从服务器填充的,所以我猜不出有多少元素(标签),
如何确保这些制表符元素将填充父元素的整个空间?
如果它们位于行和列的位置,我认为会更容易,因为列div
将具有class="col"
,但如果它们是标签,则如何创建相同的效果。
这是HTML:
<ul class="nav nav-tabs">
<li class="list" role="presentation" routerLinkActive='active' *ngFor="let tab of tabsHeadings">
<a role="tab" [routerLink]="['/about-us']" [queryParams]="{ tab: tab }" queryParamsHandling="merge" (click)="changeTab(tab)">{{tab}}</a>
</li>
</ul>
&#13;
我有一些CSS类需要留在标签中。 (如果我将整个事物更改为divs
然后使用bootstrap rows and columns
,那么选项卡的行为和样式将会发生变化)
现在我在每个标签上都使用width: 33.3%
,因为理想情况下(在大多数情况下)最多会有3个标签,但在某些情况下会有更少
CSS:
.tab .nav-tabs {
border-bottom: solid;
border-bottom-color: #153967;
border-bottom-width: 1px;
font-family: Industry;
margin-left: 18%;
margin-right: 18%;
/*padding-left: 19%;
padding-right: 19%;*/
padding-top: 30px;
margin-bottom: -20px;
}
.tab .nav-tabs > li a {
color: #153967;
font-family: Industry;
}
.tab .nav-tabs > li a:hover, .tab .nav-tabs > li.active > a {
background: #fff;
color: #153967;
/*padding-bottom:5px;*/
border: 0px solid transparent;
border-bottom: 5px solid #153967;
font-weight: bold;
}
.tab .tab-content {
color: #153967;
padding-left: 18%;
padding-right: 18%;
margin-top: 1.6em;
}
.list {
width: 33.3%;
}
&#13;
请问有人帮忙吗?