仅用CSS实现Bootstrap分组按钮折叠面板的行1效果迁移

我在Bootstrap模板中实现了多个折叠面板：第一行的Collapse 1和2是预期效果——按钮并排显示，点击后下方展开对应面板。但出于无障碍访问的Tab键顺序需求，我无法采用第一行的HTML结构，只能使用第二行的结构（按钮与对应折叠面板分组在同一列内）。请问能否仅通过CSS将第一行的外观与行为迁移到第二行？我自行尝试后未能成功。

示例代码 #

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<div class="container mt-5">

  <!-- 预期效果的结构 -->
  <div class="row">
    <div class="col-md-12 text-center">
      <button
        class="btn btn-primary"
        type="button"
        data-toggle="collapse"
        data-target="#collapseText1"
        aria-expanded="false"
        aria-controls="collapseText1">Collapse 1</button>
      <button
        class="btn btn-secondary"
        type="button"
        data-toggle="collapse"
        data-target="#collapseText2"
        aria-expanded="false"
        aria-controls="collapseText2">Collapse 2</button>
    </div>
  </div>
  
  <div class="row mt-3">
    <div class="col-md-12">
      <div class="collapse mb-3" id="collapseText1">
        <div class="card card-body">Text for Collapse 1.</div>
      </div>
      <div class="collapse mb-3" id="collapseText2">
        <div class="card card-body">Text for Collapse 2.</div>
      </div>
    </div>
  </div>
  
  <!-- 需要调整的结构 -->
  <div class="row mt-5">
    <div class="col-md-6 text-center">
      <button
        class="btn btn-primary"
        type="button"
        data-toggle="collapse"
        data-target="#collapseText3"
        aria-expanded="false"
        aria-controls="collapseText3">Collapse 3</button>
      <div class="collapse mt-3 mb-3" id="collapseText3">
        <div class="card card-body">Text for Collapse 3.</div>
      </div>
    </div>
    <div class="col-md-6 text-center">
      <button
        class="btn btn-secondary"
        type="button"
        data-toggle="collapse"
        data-target="#collapseText4"
        aria-expanded="false"
        aria-controls="collapseText4">Collapse 4</button>
      <div class="collapse mt-3 mb-3" id="collapseText4">
        <div class="card card-body">Text for Collapse 4.</div>
      </div>
    </div>
  </div>

</div>

解决方案 #

可以通过调整布局定位和列样式，仅用CSS实现需求：

1. 添加自定义CSS #

/* 让按钮所在列自适应宽度，实现并排 */
.row.collapse-group .col-md-6 {
  flex: 0 0 auto;
  width: auto;
  padding-right: 0.75rem;
}

/* 将折叠面板移出当前列，拉伸至整行宽度 */
.row.collapse-group .collapse {
  position: absolute;
  left: 15px; /* 对齐container的内边距 */
  right: 15px;
  width: calc(100% - 30px);
  margin-top: 0.5rem !important;
}

/* 给父行设置相对定位，作为折叠面板的定位基准 */
.row.collapse-group {
  position: relative;
  padding-bottom: 1rem; /* 避免折叠面板展开时覆盖下方内容 */
}

/* 给下方行预留足够间距，防止重叠 */
.row.collapse-group + .row {
  margin-top: 6rem; /* 可根据折叠面板实际高度调整 */
}

2. 修改目标行的HTML #

给需要调整的row添加collapse-group类：

<div class="row mt-5 collapse-group">
  <div class="col-md-6 text-center">
    <button
      class="btn btn-primary"
      type="button"
      data-toggle="collapse"
      data-target="#collapseText3"
      aria-expanded="false"
      aria-controls="collapseText3">Collapse 3</button>
    <div class="collapse mt-3 mb-3" id="collapseText3">
      <div class="card card-body">Text for Collapse 3.</div>
    </div>
  </div>
  <div class="col-md-6 text-center">
    <button
      class="btn btn-secondary"
      type="button"
      data-toggle="collapse"
      data-target="#collapseText4"
      aria-expanded="false"
      aria-controls="collapseText4">Collapse 4</button>
    <div class="collapse mt-3 mb-3" id="collapseText4">
      <div class="card card-body">Text for Collapse 4.</div>
    </div>
  </div>
</div>

效果说明 #

• 按钮会像第一行一样并排显示，同时保留原有的Tab键顺序（先聚焦Collapse3按钮，再聚焦其下方的折叠面板内容，然后是Collapse4按钮）。
• 点击按钮后，折叠面板会在整行按钮的下方展开，和第一行的视觉效果一致。

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