如何移除Bootstrap Accordion（手风琴组件）的边框？

问题原因 #

你已经给外层<li>和<Accordion>加了border-0，但Bootstrap的Accordion组件的边框样式是挂载在内部的Accordion.Item、Accordion.Header、Accordion.Body元素上的，仅给父类添加移除边框的工具类无法覆盖这些内部元素的默认样式。

可行解决方案 #

1. 用Bootstrap工具类直接覆盖内部元素

给所有带边框的内部组件加上border-0，如果不需要圆角可以再加rounded-0：

<li className='sidebar-list-item w-100 border-0'>
  <Accordion className="border-0">
    <Accordion.Item eventKey="0" className="border-0">
      <Accordion.Header className="border-0 rounded-0"><i className="fas fa-chart-bar text-green"></i> <span>L T S</span></Accordion.Header>
      <Accordion.Body className="border-0 rounded-0">
        <p>New LTS</p>
        <p>My LTS</p>
      </Accordion.Body>
    </Accordion.Item>
  </Accordion>
</li>

2. 自定义CSS全局覆盖

如果工具类不够灵活，可以写自定义CSS彻底清除边框：

/* 清除Accordion所有元素的边框和圆角 */
.accordion-item,
.accordion-header,
.accordion-body {
  border: none !important;
  border-radius: 0 !important;
}

/* 可选：移除Header聚焦时的默认阴影框 */
.accordion-button:focus {
  box-shadow: none;
}

将这段CSS引入你的项目样式文件即可生效。

3. 使用React Bootstrap的flush属性（推荐）

如果你用的是React Bootstrap，直接给<Accordion>添加flush属性，就能自动移除所有边框和圆角，适配侧边栏的紧凑布局：

<li className='sidebar-list-item w-100 border-0'>
  <Accordion flush className="border-0">
    <Accordion.Item eventKey="0">
      <Accordion.Header><i className="fas fa-chart-bar text-green"></i> <span>L T S</span></Accordion.Header>
      <Accordion.Body>
        <p>New LTS</p>
        <p>My LTS</p>
      </Accordion.Body>
    </Accordion.Item>
  </Accordion>
</li>

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