本文介绍了如何在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中制作全角标签卡?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!