侧杠中的Bootstrap 4手风琴,伸展活动塌陷

时间:2018-03-08 13:56:50

标签: flexbox bootstrap-4 bootstrap-accordion

我正在尝试构建一个包含Bootstrap 4手风琴的侧边栏。我希望折叠窗格在激活时拉伸,以便填充侧边栏中的所有可用空间(如果内容太大而无法容纳,则折叠窗格必须获取滚动条。)

我尝试将#accordion换成d-flex flex-column,但这似乎还不够。 div(侧边栏)和#accordion周围的#accordionh-100级,所以它们一直向下延伸。

我认为卡片,包裹标题和折叠窗格都是问题所在。但不确定。

手风琴标记的开头如下:

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

jsFiddle是我所拥有的缩短示例。

1 个答案:

答案 0 :(得分:1)

没有办法用JavaScript或一些额外的CSS来做这件事。问题是,活动崩溃div位于card内,但活动崩溃div的父card也需要增长以填充高度。

解决方法是折叠父卡和卡内的div。这可以通过为每张卡使用相同的类来完成。可折叠的div。例如,添加&#34; collapseOne&#34;卡和内部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使&#34;活跃&#34;卡填充高度,但当它不活动时缩小...

.card {
    flex: 1 1 100%;
}

.collapse {
    flex: 0 0 auto;
}

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

Demo