Question

我有一些引导标签，它们是由typescript文件中的数组生成的有角4 *ngFor指令，这个数组是从服务器填充的，所以我猜不出有多少元素（标签），如何确保这些制表符元素将填充父元素的整个空间？

如果它们位于行和列的位置，我认为会更容易，因为列div将具有class="col"，但如果它们是标签，则如何创建相同的效果。

这是HTML：

＆＃13;

<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：

＆＃13;

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

请问有人帮忙吗？

angular 4 bootstrap选项卡填充父元素的完整大小

0 个答案: