如何在Bootstrap-Vue中制作全角标签卡？

Question

我从 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>

Answer 1

您可以使用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>

Answer 2

您可以添加以下简单的 CSS 规则并将 full-width class 添加到 b-card:

       <b-card no-body class="full-width" >
        ...   

      .full-width .card-header-tabs {
       margin-right: -21px;
       margin-left: -21px;
    }

   .full-width .nav-tabs .nav-item {
       margin-bottom: -1px;
       flex-grow: 1;
       text-align: center;
   }

一切都会完成

检查这个codesandbox code

如何在Bootstrap-Vue中制作全角标签卡？

How to make a full-width tab card in Bootstrap-Vue?

javascript

css

vue.js

vuejs2

bootstrap-vue