如何用Bootstrap构建三栏Accordion与List-group并修复布局问题

我明白你现在的布局问题了——把每个章节单独放在row里，确实会导致新增章节时被中间的问题列表挤到下方，破坏三栏联动的结构。咱们来调整一下布局逻辑，把整个界面改成固定的三栏结构，这样不管加多少章节，都能保持左侧章节栏、中间问题栏、右侧响应栏的横向排列：

关键修改点 #

• 移除每个Chapter单独的row，改用全局三栏布局：整个页面一个container，内部一个row，分成三个固定宽度的列（左侧col-3、中间col-3、右侧col-6）
• 左侧栏统一放置所有可折叠的章节面板，新增Chapter时直接在左侧栏添加即可，不会影响整体布局
• 中间的问题列表和右侧的响应内容使用统一的tab-content容器，通过data-toggle和id正确关联，确保子章节、问题、响应的联动逻辑正常
• 修正Bootstrap属性的错误用法，比如data-parent的正确指向，以及tab-pane的初始显示状态控制

修正后的完整代码 #

<!DOCTYPE html>
<html>
<head>
  <!-- 引入Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-4">
  <!-- 全局三栏布局 -->
  <div class="row">
    <!-- 左侧章节栏 -->
    <div class="col-3">
      <div class="list-group" role="tablist">
        <!-- Chapter 1 -->
        <div class="list-group panel">
          <a href="#chapter1" class="list-group-item" data-toggle="collapse">Chapter 1</a>
          <div class="collapse list-group" id="chapter1" role="tablist">
            <a class="list-group-item list-group-item-action" id="SC11" data-toggle="list" href="#SubChapter11" role="tab" aria-controls="SubChapter11">SubChapter 1.1</a>
            <a class="list-group-item list-group-item-action" id="SC12" data-toggle="list" href="#SubChapter12" role="tab" aria-controls="SubChapter12">SubChapter 1.2</a>
            <a class="list-group-item list-group-item-action" id="SC13" data-toggle="list" href="#SubChapter13" role="tab" aria-controls="SubChapter13">SubChapter 1.3</a>
          </div>
        </div>
        <!-- Chapter 2 -->
        <div class="list-group panel mt-2">
          <a href="#chapter2" class="list-group-item" data-toggle="collapse">Chapter 2</a>
          <div class="collapse list-group" id="chapter2" role="tablist">
            <a class="list-group-item list-group-item-action" id="SC21" data-toggle="list" href="#SubChapter21" role="tab" aria-controls="SubChapter21">SubChapter 2.1</a>
            <a class="list-group-item list-group-item-action" id="SC22" data-toggle="list" href="#SubChapter22" role="tab" aria-controls="SubChapter22">SubChapter 2.2</a>
          </div>
        </div>
      </div>
    </div>

    <!-- 中间问题列表栏 -->
    <div class="col-3">
      <div class="tab-content" id="questionsTabContent">
        <!-- SubChapter 1.1 问题 -->
        <div class="tab-pane fade" id="SubChapter11" role="tabpanel" aria-labelledby="SC11">
          <div class="list-group" role="tablist">
            <a class="list-group-item list-group-item-action" id="q110" data-toggle="list" href="#qText-110" role="tab" aria-controls="qText-110">Question 1.1.10</a>
            <a class="list-group-item list-group-item-action" id="q111" data-toggle="list" href="#qText-111" role="tab" aria-controls="qText-111">Question 1.1.11</a>
            <a class="list-group-item list-group-item-action" id="q112" data-toggle="list" href="#qText-112" role="tab" aria-controls="qText-112">Question 1.1.12</a>
          </div>
        </div>
        <!-- SubChapter 1.2 问题 -->
        <div class="tab-pane fade" id="SubChapter12" role="tabpanel" aria-labelledby="SC12">
          <div class="list-group" role="tablist">
            <a class="list-group-item list-group-item-action" id="q120" data-toggle="list" href="#qText-120" role="tab" aria-controls="qText-120">Question 1.2.10</a>
            <a class="list-group-item list-group-item-action" id="q121" data-toggle="list" href="#qText-121" role="tab" aria-controls="qText-121">Question 1.2.11</a>
          </div>
        </div>
        <!-- SubChapter 1.3 问题 -->
        <div class="tab-pane fade" id="SubChapter13" role="tabpanel" aria-labelledby="SC13">
          <div class="list-group" role="tablist">
            <a class="list-group-item list-group-item-action" id="q130" data-toggle="list" href="#qText-130" role="tab" aria-controls="qText-130">Question 1.3.10</a>
          </div>
        </div>
        <!-- SubChapter 2.1 问题 -->
        <div class="tab-pane fade" id="SubChapter21" role="tabpanel" aria-labelledby="SC21">
          <div class="list-group" role="tablist">
            <a class="list-group-item list-group-item-action" id="q210" data-toggle="list" href="#qText-210" role="tab" aria-controls="qText-210">Question 2.1.10</a>
          </div>
        </div>
        <!-- SubChapter 2.2 问题 -->
        <div class="tab-pane fade" id="SubChapter22" role="tabpanel" aria-labelledby="SC22">
          <div class="list-group" role="tablist">
            <a class="list-group-item list-group-item-action" id="q220" data-toggle="list" href="#qText-220" role="tab" aria-controls="qText-220">Question 2.2.10</a>
          </div>
        </div>
      </div>
    </div>

    <!-- 右侧响应内容栏 -->
    <div class="col-6">
      <div class="tab-content" id="responseTabContent">
        <!-- Question 1.1.10 响应 -->
        <div class="tab-pane fade" id="qText-110" role="tabpanel" aria-labelledby="q110">
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Response for Question 1.1.10</h5>
              <p class="card-text">这里是问题1.1.10的详细响应内容</p>
            </div>
          </div>
        </div>
        <!-- Question 1.1.11 响应 -->
        <div class="tab-pane fade" id="qText-111" role="tabpanel" aria-labelledby="q111">
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Response for Question 1.1.11</h5>
              <p class="card-text">这里是问题1.1.11的详细响应内容</p>
            </div>
          </div>
        </div>
        <!-- Question 1.1.12 响应 -->
        <div class="tab-pane fade" id="qText-112" role="tabpanel" aria-labelledby="q112">
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Response for Question 1.1.12</h5>
              <p class="card-text">这里是问题1.1.12的详细响应内容</p>
            </div>
          </div>
        </div>
        <!-- 其他问题的响应可以继续添加 -->
        <div class="tab-pane fade" id="qText-120" role="tabpanel" aria-labelledby="q120">
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Response for Question 1.2.10</h5>
              <p class="card-text">这里是问题1.2.10的详细响应内容</p>
            </div>
          </div>
        </div>
        <div class="tab-pane fade" id="qText-210" role="tabpanel" aria-labelledby="q210">
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Response for Question 2.1.10</h5>
              <p class="card-text">这里是问题2.1.10的详细响应内容</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 引入Bootstrap依赖的JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

补充说明 #

1. 记得引入Bootstrap的CSS和JS文件（代码中已经包含CDN链接），否则折叠和tab切换功能无法正常工作
2. 如果需要默认显示某个子章节的内容，可以给对应的tab-pane添加show active类，比如给#SubChapter11添加class="tab-pane fade show active"
3. 后续新增Chapter时，只需要在左侧栏的list-group里添加新的折叠面板即可，完全不会影响中间和右侧的布局结构

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