如何使用 vue bootstrap 将类添加到弹出窗口？答案

【问题标题】：How can I add a class to a popover with vue boostrap?如何使用 vue bootstrap 将类添加到弹出窗口？
【发布时间】：2026-01-27 10:25:01
【问题描述】：

我有：

    <li class="nav-item">
      <b-popover
        target="search-button"
        placement="topleft"
        title="Search"
        triggers="click"
        content="Placement"
        container="nav-container"
      >
        <template slot="title">Interactive Content</template>
        <template slot="content">Interactive Content</template>
      </b-popover>
      <a class="nav-link" href="#" title="Popover Title" id="search-button">
        <i class="material-icons md-48">search</i>
      </a>
    </li>

我想向popover 添加一个类，但理想情况下将其范围限定为该组件。当我尝试这样做时：


<style scoped>
.nav {
  background: white;
  border-top: 0.1px solid silver;
}

.nav-pills .nav-link {
  border-radius: 0;
}

.popover {
  width: 100%;
  background: red;
}
</style>

它似乎对实际的弹出框没有影响。

【问题讨论】：

你尝试过用queryselector上课吗？可以添加到mounted。
我可以——不过看起来有点老套，不是吗？
是的。但是，如果您找不到更好的方法，请尝试。 :D
它可以工作，但随着弹出框变宽会出现明显的延迟

标签： vue.js bootstrap-4 bootstrap-vue

【解决方案1】：

2.0.0-rc.26 版（即将发布）增加了对工具提示/弹出框变体的支持以及将自定义类应用于工具提示/弹出框根元素。

您可以在https://bootstrap-vue.netlify.com/ 看到预览（一旦发布将出现在https://bootstrap-vue.js.org/）

【讨论】：

版本 2.0.0-rc.26 已经发布。

【解决方案2】：

不能给<b-popover>上课，你可以看here。

但正如我在评论中提到的，您可以使用 querySelector 并提供类或样式。

干杯。

【讨论】：