我正在尝试构建一个包含Bootstrap 4手风琴的侧边栏。我希望折叠窗格在激活时拉伸,以便填充侧边栏中的所有可用空间(如果内容太大而无法容纳,则折叠窗格必须获取滚动条。)
我尝试将#accordion
换成d-flex flex-column
,但这似乎还不够。 div
(侧边栏)和#accordion
周围的#accordion
有h-100
级,所以它们一直向下延伸。
我认为卡片,包裹标题和折叠窗格都是问题所在。但不确定。
手风琴标记的开头如下:
<div id="accordion" class="d-flex flex-column align-items-stretch h-100">
此jsFiddle是我所拥有的缩短示例。
答案 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;
}