为 ngb-tabset 创建自定义 CSS 设计答案

【问题标题】：Create a custom CSS design for ngb-tabset为 ngb-tabset 创建自定义 CSS 设计
【发布时间】：2019-06-22 04:32:40
【问题描述】：

我正在尝试为 ngb-tabset 创建自定义设计

这里是html代码

 <ngb-tabset>
          <ngb-tab>
              <ng-template ngbTabTitle><span class="tab-title">All Professional Learnings</span></ng-template>
              <ng-template ngbTabContent>
                  <app-all-professional-learnings></app-all-professional-learnings>
              </ng-template>
          </ngb-tab>
          <ngb-tab>
              <ng-template ngbTabTitle><span class="tab-title">My Professional Learnings</span></ng-template>
              <ng-template ngbTabContent>
                  <app-my-professional-learnings></app-my-professional-learnings>
              </ng-template>
          </ngb-tab>
      </ngb-tabset>

我尝试过的一些 css

.nav-link.active, .nav-pills .show > .nav-link {
  background-color: transparent !important;
  color: $primary !important;
  border-radius: 0;
  border-bottom: 3px solid;
  padding-bottom: 2px;
  border-color: #dee2e6 #dee2e6 $primary !important;
}
.nav-link {
  margin-bottom: 25px !important;
  color: $primary !important;
  border-left: 0px solid !important;
  border-right: 0px solid !important;
  border-top: 0px solid !important;
}
.nav-tabs{
  border-bottom: 0 !important;
}

我使用的设计创建了如下所示的设计

谁能告诉我如何设计上面的标签

【问题讨论】：

标签： html angular sass ng-bootstrap angular-bootstrap

【解决方案1】：

试试这个。它应该可以工作。

.nav-link.active, .nav-pills .show > .nav-link {
  background-color: #CD853F !important;
  color: white !important;
  border-radius: 0;
  border: 3px solid #CD853F;
  padding-bottom: 2px;      
}
.nav-link {
  margin-bottom: 25px !important;
  color: #CD853F !important;
  border: 3px solid #CD853F !important;      
}
.nav-tabs{
  border-bottom: 0 !important;
}

我不确定你使用的变量，所以我用十六进制值替换它们。

【讨论】：

【解决方案2】：

@MM 解决方案的一些变化

.nav-link.active, .nav-pills .show > .nav-link {
  background-color: $primary !important;
  color: white !important;
  border-radius: 0;
  border-bottom: 3px solid $primary;
  padding-bottom: 2px;
}
.nav-link {
  margin-bottom: 25px !important;
  color: $primary !important;
  border: 3px solid $primary !important;   
}
.nav-tabs .nav-link{
  border-top-left-radius: 0rem;
    border-top-right-radius: 0rem;
}
.nav-tabs .nav-link.active {
  border: 6px solid #9f8148 !important;
}

【讨论】：