Bootstrap 侧边栏中有 4 个手风琴，带有拉伸的主动折叠

Question

我正在尝试构建一个包含 Bootstrap 4 手风琴的边栏。我希望折叠窗格在激活时伸展，以便它们填充侧边栏中所有可用的 space（如果内容太大无法容纳，折叠窗格将必须获得滚动条）。

我试着把包装 #accordion 变成 d-flex flex-column 但这似乎还不够。 #accordion（边栏）周围的 div 和 #accordion 有 h-100 class，所以它们一直向下延伸。

我认为卡片、包装 headers 和折叠窗格是问题所在。但不确定。

手风琴标记的开头如下：

<div id="accordion" class="d-flex flex-column align-items-stretch h-100">

这个 jsFiddle 是我所拥有的一个简短示例。

Answer 1

没有办法做到这一点 w/o JavaScript 或一些额外的 CSS。问题是主动折叠 div 在 card 内部，但主动折叠 div 的父级 card 也需要增长以填充高度。

解决方法是折叠父卡和卡内的 div。这可以通过对每张卡片使用相同的 class 及其可折叠 div 来完成。例如，将 "collapseOne" class 添加到卡片和内部 div。然后切换折叠目标的按钮 (data-target=".collapseOne")。

https://www.codeply.com/go/ye633Zj3Yy

<div class="card collapse show collapseOne border-bottom-0" data-parent="#accordion">
        <div class="card-header" id="headingOne">
            <h5 class="mb-0">
                <button class="btn btn-link" data-toggle="collapse" data-target=".collapseOne" aria-expanded="true" aria-controls="collapseOne">
                  Collapsible Group Item #1
                </button>
              </h5>
        </div>
        <div id="collapseOne" class="collapse show fade collapseOne" aria-labelledby="headingOne" data-parent="#accordion">
            <div class="card-body">
                Content...
            </div>
        </div>
</div>

然后一些额外的 flexbox CSS 使 "active" 卡片填充高度，但在不活动时收缩...

.card {
    flex: 1 1 100%;
}

.collapse {
    flex: 0 0 auto;
}

.collapse.show {
    flex: 1 0 auto;
}

Demo

Bootstrap 侧边栏中有 4 个手风琴，带有拉伸的主动折叠

Bootstrap 4 accordion in sidebar with stretched active collapse

flexbox

bootstrap-accordion

bootstrap-4