如何在Bootstrap 5手风琴按钮内实现两个元素分别左右对齐

问题原因 #

Bootstrap 5 的 .accordion-button 默认采用 Flex 布局，float 属性在 Flex 容器中会直接失效，这是原有代码无法实现两端对齐的核心原因，并非组件的设计限制。

解决方案 #

场景1：不需要保留手风琴默认的展开/折叠箭头 #

给按钮添加 Bootstrap 内置的 .justify-content-between 类实现子元素两端对齐，同时隐藏默认箭头即可：

<style>
/* 隐藏默认的折叠箭头 */
.accordion-button::after {
  display: none;
}
</style>

<div class="accordion" id="accordion2">
    <div class="accordion-item">
        <h2 class="accordion-header" id="headingOne">
            <button class="accordion-button justify-content-between" type="button" data-bs-toggle="collapse" data-bs-target="#collapse2"
                aria-expanded="true" aria-controls="collapse2">
                <p class="h5 mb-0">Grade 2</p>
                <span class="h5">1 <i class="fas fa-book"></i></span>
            </button>
        </h2>
        <div id="collapse2" class="accordion-collapse collapse" aria-labelledby="heading2" data-bs-parent="#accordion2">
            <div class="accordion-body" style="padding-bottom:0px;">
                <a href="http://localhost:8000/cm/unit/3" class="h5">Unit 1</a>&nbsp;&nbsp;&nbsp;&nbsp;<p>Some text goes here.</p>
            </div>
        </div>
    </div>
</div>

其中 .mb-0 用于清除 <p> 标签默认的下外边距，保证两个元素垂直居中对齐。

场景2：需要保留默认的展开/折叠箭头 #

在按钮内部新增一层全宽的 Flex 容器包裹需要对齐的两个元素，避免影响箭头的默认位置：

<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse2"
    aria-expanded="true" aria-controls="collapse2">
    <div class="d-flex justify-content-between w-100">
        <p class="h5 mb-0">Grade 2</p>
        <span class="h5">1 <i class="fas fa-book"></i></span>
    </div>
</button>

两种方案都不需要额外编写自定义布局样式，直接复用 Bootstrap 内置工具类即可实现需求。

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