Popover边框颜色由CSS变量--bs-popover-border控制，Bootstrap 5.2+需通过覆盖该变量生效，全局用:root，局部用customClass加对应CSS，v4则直接改.popover的border-color。

Popover边框颜色由CSS变量控制，不是直接改border属性

bootstrap 5+ 的 popover 默认使用 --bs-popover-border css 变量定义边框颜色，直接在元素上写 style="border: 1px solid red" 会被覆盖。必须通过覆盖该变量或其对应的选择器生效。

• 变量名：--bs-popover-border（影响整个 popover 框架边框）
• 生效范围：仅对 Bootstrap 5.2+ 的默认 Popover 生效；旧版（如 v4）用的是 .popover 类的 border-color
• 优先级注意：自定义样式需比 Bootstrap 原生样式权重高，推荐用 :root 或组件级 style 内联变量，或加 !important（不推荐）

修改方式：全局改用:root，局部改用data-bs-custom-class

全局统一修改最简单，但会影响所有 Popover；局部定制更灵活，适合不同场景区分样式。

• 全局改法（推荐用于主题色统一）：

  :root {
    --bs-popover-border: #e63946;
  }

• 局部改法：初始化时传入 customClass，再写对应 CSS：

  const popover = new bootstrap.Popover(element, {
    customClass: 'my-popover-red-border'
  });

  然后定义：

  .my-popover-red-border .popover {
    --bs-popover-border: #e63946;
  }

• 注意：customClass 会加在 Popover 容器（.popover 元素）上，不是触发元素

常见错误：改了.popover但没生效？检查是否漏了.popover-header和.popover-body的继承

Popover 实际由三部分组成：.popover（外框）、.popover-header（标题）、.popover-body（内容）。边框只在 .popover 上，但如果你手动加了 border 到 header/body，会干扰视觉一致性。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

• 错误示例：.popover-header { border-bottom: 1px solid #007bff } → 导致上下边框颜色不一致
• 正确做法：只改 .popover 的 --bs-popover-border，让 header/body 自动继承边框样式（它们本身无边框）
• 验证方法：打开 DevTools，选中 popover 元素，查看 computed 样式中 border-color 是否等于你设的变量值

兼容性提醒：v4 和 v5 的类名与变量名完全不同

如果你项目还在用 Bootstrap 4，--bs-popover-border 不存在，得直接覆盖 .popover 的 border-color。

• v4 写法：

  .popover { border-color: #ff6b6b !important; }

• v5 写法（推荐变量）：

  .popover { --bs-popover-border: #ff6b6b; }

• 混用风险：v4 项目里用了 v5 的变量名，CSS 不生效且无报错，容易卡住调试
• 查版本方法：看 bootstrap.min.css 文件头注释，或运行 bootstrap.version（v5+ 支持，v4 不暴露）

实际改边框颜色这事，关键不在“怎么加样式”，而在“加到哪一层、谁在管这个颜色”。变量名写错一个字母、版本没对上、或者 class 加错位置，都会白忙活半天。