如何移除Bootstrap accordion组件展开及折叠状态下的边框

问题原因 #

你之前编写的样式仅覆盖了折叠按钮、内容体的部分属性，残留边框来自三个未被处理的Bootstrap默认样式：

• .accordion-item 自带1px的实体外边框，是边框残留的主要来源
• 展开状态下.accordion-collapse 容器自带默认边框，和item边框叠加后会出现明显分隔线
• 按钮focus状态设置的和背景同色的box-shadow，会产生类似边框的轮廓感

修复代码 #

直接在原有CSS后追加以下代码即可，不需要修改现有HTML结构：

/* 清除折叠项外层默认边框 */
.accordion .accordion-item {
  border: none !important;
}

/* 统一折叠按钮全状态样式，清除所有边框、阴影、轮廓 */
.accordion-button,
.accordion-button:not(.collapsed),
.accordion-button:link,
.accordion-button:visited,
.accordion-button:hover,
.accordion-button:active,
.accordion-button:focus {
  font-weight: bold;
  color: #000 !important;
  background-color: #f5f5f5 !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  text-decoration: none !important;
}

/* 清除折叠内容容器默认边框 */
.accordion .accordion-collapse {
  border: none !important;
}

/* 统一内容体样式，清除边框 */
.accordion .accordion-body {
  background-color: #f5f5f5;
  border: none !important;
}

可选优化 #

• 可以删除你之前写在button、accordion-body标签上的内联样式，上述CSS已经统一处理了字体加粗、背景色属性，后续维护更方便
• 如果需要隐藏Bootstrap默认的折叠箭头图标，追加以下代码即可：

.accordion-button::after {
  display: none !important;
}

问题复现参考截图 #

• 折叠状态原问题效果：
• 展开状态原问题效果：

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