我用BootstrapVue创建了一个测试nuxt.js应用程序。我使用了<b-tabs>，但页面上显示的不是活动选项卡的内容，而是所有选项卡的内容。
我有这样的<b-tabs>：
<template>
<b-card no-body>
<b-tabs card >
<b-tab active title="A" no-body /><p>Content A</p></b-tab>
<b-tab title="B" no-body /><p>Content B</p></b-tab>
<b-tab title="C" no-body /><p>Content C</p></b-tab>
</b-tabs>
</b-card>
</template>
无论选择哪个选项卡，页面都会显示所有内容，如下所示：
内容A
内容B
内容C
但是，如果从上面的代码中删除<p></p>标记，则内容的显示方式会有细微的差异。
对于第一个选项卡：
内容A内容B内容C
对于第二个选项卡：
内容A
内容B内容C
对于第三个选项卡：
内容A内容B
内容C
造成这种情况的原因是什么？我在"普通"Vue.js应用程序中使用过BootstrapVue，我没有遇到这样的问题。我在文档中也没有看到任何关于所需样式的内容。
我已经试过了，它本质上是一个标签关闭的问题。
<template>
<b-card no-body>
<b-tabs card>
<b-tab active title="A" no-body><p>Content A</p></b-tab>
<b-tab title="B" no-body><p>Content B</p></b-tab>
<b-tab title="C" no-body><p>Content C</p></b-tab>
</b-tabs>
</b-card>
</template>
试着使用ESlint，它可以极大地帮助你在短时间内发现错误！