Как сделать вкладку во всю ширину в 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

Вы можете добавить следующие простые правила CSS и добавить full-width класс к 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;
   }

и все будет сделано

отметьте это коды и код коробки

Answer 2

Вы можете использовать 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>