如何移除Bootstrap 5 Popover箭头与主体之间的分隔线？

你看到的这条分隔线，本质是Popover箭头的边框和内容容器的边框叠加形成的视觉效果，只需通过自定义CSS调整箭头的边框颜色就能解决：

解决方案代码 #

添加以下CSS样式（确保该样式在Bootstrap CSS之后加载）：

/* 统一处理所有方向的Popover箭头 */
.popover .popover-arrow::before {
  border-top-color: var(--bs-popover-bg) !important;
  border-bottom-color: var(--bs-popover-bg) !important;
  border-left-color: var(--bs-popover-bg) !important;
  border-right-color: var(--bs-popover-bg) !important;
}

如果需要精准针对不同方向的Popover（比如仅处理顶部弹出的情况），可以用下面的代码：

/* 顶部Popover */
.popover.bs-popover-top .popover-arrow::before {
  border-top-color: var(--bs-popover-bg);
}
/* 底部Popover */
.popover.bs-popover-bottom .popover-arrow::before {
  border-bottom-color: var(--bs-popover-bg);
}
/* 左侧Popover */
.popover.bs-popover-start .popover-arrow::before {
  border-left-color: var(--bs-popover-bg);
}
/* 右侧Popover */
.popover.bs-popover-end .popover-arrow::before {
  border-right-color: var(--bs-popover-bg);
}

完整示例代码 #

将CSS整合到你的页面中，完整代码如下：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>

<style>
.popover .popover-arrow::before {
  border-top-color: var(--bs-popover-bg) !important;
  border-bottom-color: var(--bs-popover-bg) !important;
  border-left-color: var(--bs-popover-bg) !important;
  border-right-color: var(--bs-popover-bg) !important;
}
</style>

<a href="#" class="ms-5" style="font-size: .85rem; text-decoration: none; color: black;" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-html="true" data-bs-content="This is an example popover.  I don't want to see the line between the arrow and the content box for a clean look.">[Click for Popover example]</a>

<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})
</script>

原理说明：--bs-popover-bg是Bootstrap内置的CSS变量，对应Popover的背景色，把箭头的内侧边框设置成和背景色一致，就能消除那条突兀的分隔线，实现干净的视觉效果。

内容的提问来源于stack exchange，提问作者ajster