Bootstrap Accordion样式修改无效求助：CSS/Bootstrap新手问题

问题排查与修复步骤 #

1. 修正类名拼写错误 #

你的手风琴容器里写了accordian-flush，这是拼写错误，Bootstrap的正确类名是accordion-flush。修正后代码如下：

<div class="accordion accordion-flush" id="accordionExample">

拼写错误会导致Bootstrap的默认flush样式无法生效，同时干扰自定义CSS变量的继承逻辑。

2. 调整CSS样式写法 #

Bootstrap的变量覆盖需要确保选择器权重足够，也可以直接针对目标元素写具体样式：

方案A：正确使用Bootstrap变量（推荐）

/* 针对.accordion容器设置变量，确保样式传递给子元素 */
.accordion {
  --bs-accordion-btn-bg: #1D976C; /* 未激活按钮背景色 */
  --bs-accordion-active-bg: red; /* 激活状态背景色 */
  --bs-accordion-btn-color: #fff; /* 可选：设置按钮文字颜色，提升对比度 */
  --bs-accordion-active-color: #fff;
}

方案B：直接编写CSS规则（新手友好，优先级更高）

如果变量覆盖仍无效，直接针对按钮元素写样式，避免变量继承问题：

/* 未展开状态的按钮样式 */
.accordion .accordion-button {
  background-color: #1D976C;
  color: white;
  border: none; /* 可选：移除默认边框 */
}

/* 展开状态的按钮样式 */
.accordion .accordion-button:not(.collapsed) {
  background-color: red;
  color: white;
  box-shadow: none; /* 可选：移除默认激活阴影 */
}

3. 确认样式加载顺序 #

你的_layout中已经将自定义样式表（site.css）放在Bootstrap样式之后，这是正确的，能保证自定义样式覆盖默认样式。

验证方法 #

修改后刷新页面，右键检查手风琴按钮元素，查看Elements面板的Styles标签，确认自定义样式是否被应用：如果样式被划横线说明被覆盖，可通过添加父类选择器（比如.accordion）或临时使用!important提升优先级测试。

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