Bootstrap 4手风琴头部左右浮动Div实现等高与垂直对齐求助

嘿，我来帮你搞定这个问题！你的需求其实用Bootstrap 4自带的Flex布局就能轻松实现，完全不用破坏手风琴的原有功能，而且代码也很简洁。咱们一步步来调整：

核心思路 #

放弃原来的float布局（它很容易导致高度不对齐，还需要额外清除浮动），改用Bootstrap 4内置的Flexbox工具类——因为Bootstrap本身就基于Flex，这样和手风琴的JS逻辑完全兼容，不会出现功能冲突的问题。

具体修改步骤 #

1. 移除浮动相关代码：删掉.left、.right的浮动样式，以及那个用来清除浮动的<div class="clear"></div>。
2. 给按钮添加Flex类：给手风琴的按钮添加d-flex align-items-center w-100，这样按钮内部的元素会变成Flex容器，自动实现等高，同时整体垂直居中。
3. 调整左侧区域：给左侧的.left添加flex-grow-1 d-flex flex-column justify-content-center，让它占据按钮的剩余空间，并且内部的标题和副标题垂直居中排列。
4. 右侧区域保持自适应：右侧的.right不需要额外设置，它会自动根据图片高度调整，同时和左侧保持等高。

修改后的完整代码 #

HTML部分 #

<div class="accordion" id="page-accordion">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed d-flex align-items-center w-100" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
          <div class="left flex-grow-1 d-flex flex-column justify-content-center">
            <h5 class="card-title mb-1">OCTOBER 2018</h5>
            <h6 class="card-subtitle mb-0">TODAY IS THE DAY</h6>
          </div>
          <div class="right">
            <img src="pic.png" width="209px" height="119">
          </div>
        </button>
      </h5>
    </div>
    <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#page-accordion">
      <div class="card-body">
        <p class="card-text">DETAILS COMING SOON</p>
        <a href="#" class="btn btn-danger">Click here for details</a>
      </div>
    </div>
  </div>
</div>

简化后的CSS（只保留必要样式，比如标题间距） #

.left .card-title {
  font-size: 1.25rem; /* 可选，根据你的需求调整字号 */
}
.left .card-subtitle {
  font-size: 0.875rem; /* 可选，根据你的需求调整字号 */
  opacity: 0.8;
}

效果说明 #

• 左侧的.left区域会和右侧图片区域自动等高，因为Flex容器内的子元素默认会拉伸对齐。
• 左侧的标题和副标题会垂直居中排列，同时.left区域会占据按钮的所有剩余宽度，右侧图片保持固定尺寸。
• 手风琴的展开/折叠功能完全不受影响，因为我们只是用了Bootstrap原生的工具类，没有修改手风琴的核心结构和JS逻辑。

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