如何使用 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>

我看了tab页，好像不支持center view，怎么办？
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">

如何使用 ngx-bootstrap 居中标签

How to center tabs with ngx-bootstrap

ngx-bootstrap