如何在Bootstrap-Vue中制作全角标签卡? [英] How to make a full-width tab card in Bootstrap-Vue?

问题描述

我在bootstrap-vue中的文档中有这样的内容:

I'm having something like this from the Docs in bootstrap-vue:

带有标签的卡片:

所以我如何设法像这样设计选项卡:

So how do I manage to design the tabs like this:

我当前的代码:

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

推荐答案

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

You could add the following simple CSS rules and add full-width class to 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;
   }

一切都会完成

选中此代码沙盒代码

这篇关于如何在Bootstrap-Vue中制作全角标签卡?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！