Javascript 如何在Bootstrap Vue中制作全宽标签卡？

我在bootstrap vue中的文档中看到了类似的内容：

带标签的卡片：

那么，我该如何设计这样的选项卡：

我当前的代码：

  <b-card no-body>
    <b-tabs card>
      <b-tab title="Tab 1" active>
        Tab Contents 1
      </b-tab>
      <b-tab title="Tab 2">
        Tab Contents 2
      </b-tab>
    </b-tabs>
  </b-card>

您可以使用title item class=w-50使每个点击标题占据50%的宽度

<b-card no-body>
  <b-tabs card>
    <b-tab title="Tab 1" active title-item-class="w-50">
      Tab Contents 1
    </b-tab>
    <b-tab title="Tab 2" title-item-class="w-50">
      Tab Contents 2
    </b-tab>
  </b-tabs>
</b-card>

您可以使用title item class=w-50使每个点击标题占据50%的宽度

<b-card no-body>
  <b-tabs card>
    <b-tab title="Tab 1" active title-item-class="w-50">
      Tab Contents 1
    </b-tab>
    <b-tab title="Tab 2" title-item-class="w-50">
      Tab Contents 2
    </b-tab>
  </b-tabs>
</b-card>

---

您可以添加以下简单的CSS规则，并向b-card添加全宽度类：

一切都会好起来的

---

选中此项

您可以添加以下简单的CSS规则，并将全宽类添加到b卡：

一切都会好起来的

检查这个

结果是这样的：有没有办法缩小卡顶部的标签？这意味着标签占据了卡头的全部尺寸？结果是这样的：有没有办法缩小卡头上的标签？这意味着选项卡占据了卡头的全部大小？