bootstrap怎么修改折叠面板（Accordion）的边框颜色

张开发
• 2026/4/11 7:50:38 • 15 分钟阅读

最新文章

推荐文章

相关文章

分享文章

bootstrap怎么修改折叠面板（Accordion）的边框颜色
Accordion默认边框颜色来自.accordion-item的border-color继承自Sass变量$border-color或$accordion-border-color作用于border-top和border-bottom。Accordion 默认边框颜色从哪来bootstrap 的 accordion 边框颜色默认由 .accordion-item 的 border-color 决定而这个值继承自 $border-color sass 变量v5.3最终落在 css 的 border-bottom 和 border-top 上。不是靠 .accordion-button 控制也不是靠 box-shadow 伪装——改错地方就白调。直接覆盖 CSS 最快生效不改源码、不重编译用自定义样式覆盖即可。关键点是提高选择器权重且必须作用于 .accordion-item加 !important 不推荐但临时调试可用.accordion-item { border-color: #0d6efd !important; }更稳妥写法是增强选择器.my-accordion .accordion-item { border-color: #dc3545; }然后给外层容器加 classmy-accordion注意只设 border-color 不够border-width 和 border-style 也要一致否则可能断线或变虚——Bootstrap 默认是 1px solid用 Sass 变量全局修改适合项目级定制如果你用的是 Bootstrap 源码如通过 npm Sass 引入改变量最干净在自定义 Sass 文件里先定义 $border-color: #28a745;再 import bootstrap/scss/bootstrap;别漏掉 $accordion-border-color —— v5.3 新增了这个独立变量优先级高于 $border-color直接设它更精准$accordion-border-color: #6f42c1;改完必须重新编译 CSS热更新HMR通常不自动触发变量变更手动重启构建进程为什么加了样式没反应常见踩坑点边框“消失”或“不变色”大概率是这些原因 Murf AI AI文本转语音生成工具

更多文章