Bootstrap 5手风琴标题边框问题：图标下方边框消失

我用Bootstrap 5构建了带图标下拉菜单（drop-up）的手风琴标题，发现标题底部边框在图标下方消失了，无法查明原因。相关代码如下：

HTML代码 #

<div class="w-50 mt-5 mx-auto">
  <div class="accordion favorites-folder" id="accordionExample">
    <div class="accordion-item">
      <div class="accordion-header">
        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Accordion Header
        </button>
        <div class="btn-group dropup">
          <button type="button" class="header-actions" data-bs-toggle="dropdown" aria-expanded="false">
            <i class="fa-solid fa-ellipsis-vertical"></i>
          </button>
          <ul class="dropdown-menu dropdown-menu-end">
            <li><button class="dropdown-item" type="button"> Rename</button></li>
            <li><button class="dropdown-item" type="button">Delete</button></li>
          </ul>
        </div>
      </div>
      <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
        <div class="accordion-body">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a enim quis justo lacinia ullamcorper quis ac nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer vitae nisi vitae eros iaculis interdum tempor a sapien. Nulla pulvinar, mi quis tincidunt tristique, eros elit venenatis arcu, in dapibus dolor turpis eget nisi.
        </div>
      </div>
    </div>
  </div>
</div>

CSS代码 #

.favorites-folder {
    background-image: none;

    .accordion-item {
        .accordion-header {
            display: flex;
            justify-content: space-between;

            .accordion-button {
                background-color: #fff;
                padding: .5rem 1rem;

                &:not(.collapsed) {
                    background-color: #fff;

                    &::after {
                        background-image: none;
                    }
                }

                &:after {
                    background-image: none;
                }
            }

            .header-actions {
                background: transparent;
                border: none;
                padding-right: 1rem;
            }
        }
    }
}

原因分析 #

Bootstrap默认给.accordion-item设置了底部边框，但你将.accordion-header设为flex布局，把下拉按钮放在了.accordion-button的同级位置。由于.accordion-button在flex容器中不再占满整个宽度，下拉按钮作为独立元素会“跳出”.accordion-button的范围，加上.accordion-item的边框只延伸到容器内容的有效宽度，最终导致图标下方的边框看起来消失了。

解决方案 #

方案一：CSS快速修复 #

给.accordion-item添加overflow: hidden，强制边框完整显示：

.favorites-folder .accordion-item {
    overflow: hidden;
}

方案二：调整HTML结构（更规范） #

把下拉菜单按钮移入.accordion-button内部，利用Bootstrap的flex类实现布局，让边框自然覆盖整个标题区域：
修改后的HTML：

<div class="accordion-header">
  <button class="accordion-button d-flex justify-content-between align-items-center" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
    Accordion Header
    <div class="btn-group dropup">
      <button type="button" class="header-actions" data-bs-toggle="dropdown" aria-expanded="false">
        <i class="fa-solid fa-ellipsis-vertical"></i>
      </button>
      <ul class="dropdown-menu dropdown-menu-end">
        <li><button class="dropdown-item" type="button"> Rename</button></li>
        <li><button class="dropdown-item" type="button">Delete</button></li>
      </ul>
    </div>
  </button>
</div>

同时可以移除.accordion-header的justify-content: space-between样式，因为.accordion-button已经通过d-flex justify-content-between实现了两端对齐。

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