如何使用 Bootstrap 构建三列手风琴和列表组

Question

我正在尝试在这里构建一个类似的界面：

简而言之 - 这就是我想要实现的目标： 共有三个部分 - 全部绑定在一起。 最左边的部分是具有子章节的章节，点击时可折叠。 选择 SubChapter 时，会在中间部分打开一个问题列表。 每个问题都有一个响应区域，这个区域位于选择问题时出现的最右侧部分。

我无法让 Bootstrap 手风琴工作，所以我使用 list-groups 并得到了这个： Example in Codepen

因为每一章都是连续的，显然，当我添加第 2 章时，它会被问题列表下推。我感觉选择的布局不正确... 将不胜感激任何提示。 谢谢！

当前代码如下：

    <!-- CHAPTER 1 -->
        <div class="container">
          <div class="row">
            <div class="col-3">
              <div id="list-tab-chapter1" class="list-group" role="tablist">
                <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="SubChapter1" data-parent="#list-tab-chapter1">SubChapter 1.1</a>
                    <a class="list-group-item list-group-item-action" id="SC12" data-toggle="list" href="#SubChapter12" role="tab" aria-controls="SubChapter2" data-parent="#list-tab-chapter1">SubChapter 1.2</a>
                    <a class="list-group-item list-group-item-action" id="SC13" data-toggle="list" href="#SubChapter13" role="tab" aria-controls="SubChapter3" data-parent="#list-tab-chapter1">SubChapter 1.3</a>
                  </div>
                </div>
              </div>
            </div>

            <div class="col-3">
              <div class="tab-content" id="nav-tabContent-questions">
                <div class="tab-pane fade hide" id="SubChapter11" role="tabpanel" aria-labelledby="SubChapter11">
                  <div class="list-group" id="questions-tab-sc11" role="tablist">
                    <a class="list-group-item list-group-item-action" id="q110" data-toggle="list" href="#qText-110" role="tab" aria-controls="q110">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="q111">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="q112">Question 1.1.12</a>
                    <a class="list-group-item list-group-item-action" id="q113" data-toggle="list" href="#qText-113" role="tab" aria-controls="q113">Question 1.1.13</a>
                  </div>
                </div>

                <div class="tab-pane fade hide" id="SubChapter12" role="tabpanel" aria-labelledby="SubChapter12">
                  <div class="list-group" id="questions-tab-sc12" role="tablist">
                    <a class="list-group-item list-group-item-action" id="q210" data-toggle="list" href="#q210" role="tab">Question 1.2.10</a>
                    <a class="list-group-item list-group-item-action" id="q211" data-toggle="list" href="#q211" role="tab">Question 1.2.11</a>
                    <a class="list-group-item list-group-item-action" id="q212" data-toggle="list" href="#q212" role="tab">Question 1.2.12</a>
                    <a class="list-group-item list-group-item-action" id="q213" data-toggle="list" href="#q213" role="tab">Question 1.2.13</a>
                    <a class="list-group-item list-group-item-action" id="q214" data-toggle="list" href="#q214" role="tab">Question 1.2.14</a>
                    <a class="list-group-item list-group-item-action" id="q215" data-toggle="list" href="#q215" role="tab">Question 1.2.15</a>
                  </div>
                </div>
                <div class="tab-pane fade hide" id="SubChapter13" role="tabpanel" aria-labelledby="SubChapter13">
                    <div class="list-group" id="questions-tab-sc13" role="tablist">
                      <a class="list-group-item list-group-item-action" id="q210" data-toggle="list" href="#q210" role="tab">Question 1.3.10</a>
                      <a class="list-group-item list-group-item-action" id="q211" data-toggle="list" href="#q211" role="tab">Question 1.3.11</a>
                      <a class="list-group-item list-group-item-action" id="q212" data-toggle="list" href="#q212" role="tab">Question 1.3.12</a>
                    </div>
                  </div>
              </div>
            </div>

            <div class="col-6 tab-pane fade show">
              <div class="tab-content" id="nav-tabContent-response">
                <!-- Begin of the response group -->

                <div class="card tab-pane fade hide" id="qText-110" role="tabpanel" aria-labelledby="q110">
                  <div class="card-body">
                    <h5 class="card-title">Text of the Question 1.1.10</h5>
                    <p class="card-text">Some content of the question Some content of the question 1.1.10 </p>
                  </div>
                </div>
                <div class="card tab-pane fade hide" id="qText-111" role="tabpanel" aria-labelledby="q111">
                  <div class="card-body">
                    <h5 class="card-title">Text of the Question 1.1.11</h5>
                    <p class="card-text">Some content of the question Some content of the question 1.1.11 </p>
                  </div>
                </div>
                <div class="card tab-pane fade hide" id="qText-112" role="tabpanel" aria-labelledby="q112">
                  <div class="card-body">
                    <h5 class="card-title">Text of the Question 1.1.12</h5>
                    <p class="card-text">Some content of the question Some content of the question 1.1.12 </p>
                  </div>
                </div>
                <div class="card tab-pane fade hide" id="qText-113" role="tabpanel" aria-labelledby="q113">
                  <div class="card-body">
                    <h5 class="card-title">Text of the Question 1.1.13</h5>
                    <p class="card-text">Some content of the question Some content of the question 1.1.13 </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- CHAPTER 2 -->
        <div class="container">
          <div class="row align-items-start">
            <div class="col-3">
              <div id="list-tab-chapter2" class="list-group" role="tablist">
                <div class="list-group panel">
                  <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>
                    <a class="list-group-item list-group-item-action" id="SC23" data-toggle="list" href="#SubChapter23" role="tab" aria-controls="SubChapter23">SubChapter 2.3</a>
                  </div>
                </div>
              </div>
            </div>

            <div class="col-3">
              <div class="tab-content" id="nav-tabContent-questions">
                <!-- Begin of the question group -->
                <div class="tab-pane fade hide" id="SubChapter21" role="tabpanel" aria-labelledby="SubChapter21">
                  <div class="list-group" id="questions-tab-sc21" role="tablist">
                    <a class="list-group-item list-group-item-action" id="q2110" data-toggle="list" href="#qText-2110" role="tab" aria-controls="q2110">Question 2.1.10</a>
                    <a class="list-group-item list-group-item-action" id="q2111" data-toggle="list" href="#qText-2111" role="tab" aria-controls="q2111">Question 2.1.11</a>
                    <a class="list-group-item list-group-item-action" id="q2112" data-toggle="list" href="#qText-2112" role="tab" aria-controls="q2112">Question 2.1.12</a>
                    <a class="list-group-item list-group-item-action" id="q2113" data-toggle="list" href="#qText-2113" role="tab" aria-controls="q2113">Question 2.1.13</a>
                  </div>
                </div>

                <div class="tab-pane fade hide" id="SubChapter22" role="tabpanel" aria-labelledby="SubChapter22">
                  <div class="list-group" id="questions-tab-sc22" role="tablist">
                    <a class="list-group-item list-group-item-action" id="q2210" data-toggle="list" href="#q2210" role="tab">Question 2.2.10</a>
                    <a class="list-group-item list-group-item-action" id="q2211" data-toggle="list" href="#q2211" role="tab">Question 2.2.11</a>
                    <a class="list-group-item list-group-item-action" id="q2212" data-toggle="list" href="#q2212" role="tab">Question 2.2.12</a>
                    <a class="list-group-item list-group-item-action" id="q2213" data-toggle="list" href="#q2213" role="tab">Question 2.2.13</a>
                    <a class="list-group-item list-group-item-action" id="q2214" data-toggle="list" href="#q2214" role="tab">Question 2.2.14</a>
                    <a class="list-group-item list-group-item-action" id="q2215" data-toggle="list" href="#q2215" role="tab">Question 2.2.15</a>
                  </div>
                </div>
              </div>
            </div>

            <div class="col-6 tab-pane fade hide">
              <div class="tab-content" id="nav-tabContent-response">
                <!-- Begin of the response group -->

                <div class="card tab-pane fade hide" id="qText-2110" role="tabpanel" aria-labelledby="q2110">
                  <div class="card-body">
                    <h5 class="card-title">Question 2.1.10 repeated from </h5>
                    <p class="card-text">Some content of the question Some content of the question 2.1.10 </p>
                  </div>
                </div>
                <div class="card tab-pane fade hide" id="qText-2111" role="tabpanel" aria-labelledby="q2111">
                  <div class="card-body">
                    <h5 class="card-title">Question 2.1.11 repeated from </h5>
                    <p class="card-text">Some content of the question Some content of the question 2.1.10 </p>
                  </div>
                </div>
                <div class="card tab-pane fade hide" id="qText-2112" role="tabpanel" aria-labelledby="q2112">
                  <div class="card-body">
                    <h5 class="card-title">Question 2.1.12 repeated from </h5>
                    <p class="card-text">Some content of the question Some content of the question 2.1.10 </p>
                  </div>
                </div>
                <div class="card tab-pane fade hide" id="qText-2113" role="tabpanel" aria-labelledby="q2113">
                  <div class="card-body">
                    <h5 class="card-title">Question 2.1.13 repeated from </h5>
                    <p class="card-text">Some content of the question Some content of the question 2.1.10 </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- Comment -->

Answer 1

终于让它像这样工作了：

<body class="d-flex flex-column" style="height: 100vh">

<header class="border-bottom" style="height: 100px">header</header>

<div class="d-flex" style="flex: 1 1 auto">
    <div class="col-4 p-0 border-right" style="overflow-y: auto">
        <div class="accordion" id="accordion_1">
            <div class="card">
                <div class="card-header" id="heading_1">
                    <h5 class="mb-0">
                        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse_1"
                                aria-expanded="true" aria-controls="collapse_1">
                            Chapter 1
                        </button>
                    </h5>
                </div>

                <div id="collapse_1" class="collapse show" aria-labelledby="heading_1" data-parent="#accordion_1">
                    <div class="list-group list-group-flush">
                        <button type="button" class="list-group-item list-group-item-action"
                                data-toggle="collapse" data-target="#collapse_1_1">
                            Chapter 1.1
                        </button>
                        <button type="button" class="list-group-item list-group-item-action"
                                data-toggle="collapse" data-target="#collapse_1_2">
                            Chapter 1.2
                        </button>
                        <button type="button" class="list-group-item list-group-item-action"
                                data-toggle="collapse" data-target="#collapse_1_3">
                            Chapter 1.3
                        </button>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header" id="heading_2">
                    <h5 class="mb-0">
                        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse_2"
                                aria-expanded="true" aria-controls="collapse_2">
                            Chapter 2
                        </button>
                    </h5>
                </div>

                <div id="collapse_2" class="collapse" aria-labelledby="heading_2" data-parent="#accordion_1">
                    <div class="list-group list-group-flush">
                        <button type="button" class="list-group-item list-group-item-action"
                                data-toggle="collapse" data-target="#collapse_2_1">
                            Chapter 2.1
                        </button>
                        <button type="button" class="list-group-item list-group-item-action"
                                data-toggle="collapse" data-target="#collapse_2_2">
                            Chapter 2.2
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-4 p-0 border-right">
        <div class="accordion" id="accordion_2">
            <div class="card">
                <div class="list-group list-group-flush">
                    <div id="collapse_1_1" class="collapse" data-parent="#accordion_2">
                        <button type="button" class="list-group-item list-group-item-action"
                                data-toggle="collapse" data-target="#collapse_1_1_1">
                            Question 1.1.1
                        </button>

                        <button type="button" class="list-group-item list-group-item-action"
                                data-toggle="collapse" data-target="#collapse_1_1_2">
                            Question 1.1.2
                        </button>

                        <button type="button" class="list-group-item list-group-item-action"
                                data-toggle="collapse" data-target="#collapse_1_1_3">
                            Question 1.1.3
                        </button>
                    </div>

                    <div id="collapse_1_2" class="collapse" data-parent="#accordion_2">
                        <button type="button" class="list-group-item list-group-item-action"
                                data-toggle="collapse" data-target="#collapse_1_2_1">
                            Question 1.2.1
                        </button>
                        <button type="button" class="list-group-item list-group-item-action"
                                data-toggle="collapse" data-target="#collapse_1_2_2">
                            Question 1.2.2
                        </button>
                    </div>
                    <div id="collapse_1_3" class="collapse" data-parent="#accordion_2">
                        <button type="button" class="list-group-item list-group-item-action"
                                data-toggle="collapse" data-target="#collapse_1_3_1">
                            Question 1.3.1
                        </button>
                    </div>

                    <div id="collapse_2_1" class="collapse" data-parent="#accordion_2">Question 2.1</div>
                    <div id="collapse_2_2" class="collapse" data-parent="#accordion_2">Question 2.2</div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-4 p-0">
        <div class="accordion" id="accordion_3">
            <div id="collapse_1_1_1" class="collapse" data-parent="#accordion_3">
                Response to Question 1.1.1
            </div>
            <div id="collapse_1_1_2" class="collapse" data-parent="#accordion_3">
                Response to Question 1.1.2
            </div>
            <div id="collapse_1_1_3" class="collapse" data-parent="#accordion_3">
                Response to Question 1.1.3
            </div>


            <div id="collapse_1_2_1" class="collapse" data-parent="#accordion_3">
                Response to Question 1.2.1
            </div>
            <div id="collapse_1_2_2" class="collapse" data-parent="#accordion_3">
                Response to Question 1.2.2
            </div>

            <div id="collapse_1_3_1" class="collapse" data-parent="#accordion_3">
                Response to Question 1.3.1
            </div>
        </div>
    </div>
</div>

<footer class="border-top" style="height: 100px;">footer</footer>

</body>

链接到 Codepen enter link description here