如何使用 ngx-bootstrap 使标签居中

Question

默认情况下，选项卡显示在左侧，但您希望它们显示在中间。
我想做以下事情。

<div>
  <tabset class="justify-content-center">
    <tab heading="Basic title" id="tab1">Basic content</tab>
    <tab heading="Basic Title 1">Basic content 1</tab>
    <tab heading="Basic Title 2">Basic content 2</tab>
  </tabset>
</div>

我看了标签页，但是好像不支持中心视图，怎么办？
https://valor-software.com/ngx-bootstrap/#/tabs

我尝试在 styles.scss 中执行以下操作，但出现构建错误。

tabset ul {
  @extend .justify-content-center;
}

---

"ngx-bootstrap": "^5.2.0"

Answer 1

通过这样设置 css，我们能够实现我们想要做的事情。

---

scss

.tabset-justify-content-center {
    .nav-tabs {
      @extend .justify-content-center;
  }
}

@import '../node_modules/bootstrap/scss/bootstrap';

html

<tabset class="tabset-justify-content-center">