让手风琴占据全高,让每个单独的窗格占据整个视口高度。 (Bootstrap 4)
Getting the accordion to take full height and each individual panes to take the full viewport height. (Bootstrap 4)
https://i.stack.imgur.com/LqhXn.png这不是我的,但很清楚地解释了我想要实现的目标。
下面是我当前的代码
<div class="accordion" id="myAccordion">
<div class="card">
<div class="card-header" id="section1" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<h2 class="mb-0">
<i class="fa fa-search" aria-hidden="true"></i> Section 1
</h2>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="section1" data-parent="#myAccordion">
<div class="card-body">
Some content here
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="section2" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<h2 class="mb-0">
<i class="fa fa-briefcase" aria-hidden="true"></i> Section 2
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="section2" data-parent="#myAccordion">
<div class="card-body">
some other content here
</div>
</div>
</div>
</div>
</div>
</div>
我查看了一些类似的问题,none 到目前为止对我有所帮助。我需要第 1 部分的卡体根据用户的观点采取全高,尽管卡体内部有大量内容,并将第 2 部分的卡头一直推到手风琴的底部。感谢任何帮助或进一步参考。
[这就是我现在的结果 ->] https://i.stack.imgur.com/THCb9.png
看看这个片段:
<div class="accordion" id="myAccordion">
<div class="card">
<div class="card-header" id="section1" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<h2 class="mb-0">
<i class="fa fa-search" aria-hidden="true"></i> Section 1
</h2>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="section1" data-parent="#myAccordion">
<div class="card-body" style="height: 85vh;">
Some content here
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="section2" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<h2 class="mb-0">
<i class="fa fa-briefcase" aria-hidden="true"></i> Section 2
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="section2" data-parent="#myAccordion">
<div class="card-body" style="height: 85vh;">
some other content here
</div>
</div>
</div>
</div>
这里我们在 <div class="card-body">
上应用 style="height: 85vh;"
以增加它的高度 up-to view-port 高度的 85%。
如果要添加更多卡片,则需要降低此高度,以便在其中一张卡片展开时显示其他卡片headers。
基本思路是将手风琴高度设置为100%视口高度,将手风琴在列方向显示为flexbox,并扩大打开的部分(使用flex-grow:1;)
,这样它就会占据剩余的space垂直。
这样您就不必为身高硬编码任何数字。
如果 Bootstrap 能够扩展折叠插件以便我可以将任何 CSS class 添加到 parent 谁有可折叠的 child。当前,当您单击 header 时,可折叠部分将打开,并且 .show
class 仅添加到该可折叠部分,而不是其 parent .card
。
要识别哪个 .card
是开放的,我们需要以下 JavaScript 利用 Bootstrap Collapse Events:
$(function() {
$('.accordion-vh-100 .collapse').on('show.bs.collapse', function () {
$(this).parents('.card').addClass('show');
});
$('.accordion-vh-100 .collapse').on('hide.bs.collapse', function () {
$(this).parents('.card').removeClass('show');
});
});
这里当我们切换可折叠时,我 add/remove a CSS class .show
在它的 parent .card
.
现在我们知道打开可折叠 child 时打开了哪个 .card
。我们可以开始写 CSSs 让手风琴占据 100% 的视口高度。
首先,我想为这个 100% 视口高度功能介绍一个单独的 CSS class。我们称它为 .accordion-vh-100
。我所做的另一个更改是将 .card-header
从 div 更改为锚标记,以便整个 .card-header
都可以点击:
<div class="accordion accordion-vh-100" id="myAccordion">
<div class="card">
<a class="card-header" href="#collapseOne" data-toggle="collapse">
<h2 class="mb-0">Section 1</h2>
</a>
<div id="collapseOne" class="collapse" data-parent="#myAccordion">
<div class="card-body">...</div>
</div>
</div>
...
</div>
接下来,我们需要设置新 .accordion-vh-100
的样式以占据 100% 的视口高度,并显示为具有列流向的 flexbox:
.accordion-vh-100 {
height: 100vh;
display: flex;
flex-flow: column nowrap;
}
最后,我们需要扩大打开的 .card
:
.accordion-vh-100 .card.show {
flex-grow: 1;
}
https://i.stack.imgur.com/LqhXn.png这不是我的,但很清楚地解释了我想要实现的目标。
下面是我当前的代码
<div class="accordion" id="myAccordion">
<div class="card">
<div class="card-header" id="section1" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<h2 class="mb-0">
<i class="fa fa-search" aria-hidden="true"></i> Section 1
</h2>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="section1" data-parent="#myAccordion">
<div class="card-body">
Some content here
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="section2" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<h2 class="mb-0">
<i class="fa fa-briefcase" aria-hidden="true"></i> Section 2
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="section2" data-parent="#myAccordion">
<div class="card-body">
some other content here
</div>
</div>
</div>
</div>
</div>
</div>
我查看了一些类似的问题,none 到目前为止对我有所帮助。我需要第 1 部分的卡体根据用户的观点采取全高,尽管卡体内部有大量内容,并将第 2 部分的卡头一直推到手风琴的底部。感谢任何帮助或进一步参考。
[这就是我现在的结果 ->] https://i.stack.imgur.com/THCb9.png
看看这个片段:
<div class="accordion" id="myAccordion">
<div class="card">
<div class="card-header" id="section1" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<h2 class="mb-0">
<i class="fa fa-search" aria-hidden="true"></i> Section 1
</h2>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="section1" data-parent="#myAccordion">
<div class="card-body" style="height: 85vh;">
Some content here
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="section2" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<h2 class="mb-0">
<i class="fa fa-briefcase" aria-hidden="true"></i> Section 2
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="section2" data-parent="#myAccordion">
<div class="card-body" style="height: 85vh;">
some other content here
</div>
</div>
</div>
</div>
这里我们在 <div class="card-body">
上应用 style="height: 85vh;"
以增加它的高度 up-to view-port 高度的 85%。
如果要添加更多卡片,则需要降低此高度,以便在其中一张卡片展开时显示其他卡片headers。
基本思路是将手风琴高度设置为100%视口高度,将手风琴在列方向显示为flexbox,并扩大打开的部分(使用flex-grow:1;)
,这样它就会占据剩余的space垂直。
这样您就不必为身高硬编码任何数字。
如果 Bootstrap 能够扩展折叠插件以便我可以将任何 CSS class 添加到 parent 谁有可折叠的 child。当前,当您单击 header 时,可折叠部分将打开,并且 .show
class 仅添加到该可折叠部分,而不是其 parent .card
。
要识别哪个 .card
是开放的,我们需要以下 JavaScript 利用 Bootstrap Collapse Events:
$(function() {
$('.accordion-vh-100 .collapse').on('show.bs.collapse', function () {
$(this).parents('.card').addClass('show');
});
$('.accordion-vh-100 .collapse').on('hide.bs.collapse', function () {
$(this).parents('.card').removeClass('show');
});
});
这里当我们切换可折叠时,我 add/remove a CSS class .show
在它的 parent .card
.
现在我们知道打开可折叠 child 时打开了哪个 .card
。我们可以开始写 CSSs 让手风琴占据 100% 的视口高度。
首先,我想为这个 100% 视口高度功能介绍一个单独的 CSS class。我们称它为 .accordion-vh-100
。我所做的另一个更改是将 .card-header
从 div 更改为锚标记,以便整个 .card-header
都可以点击:
<div class="accordion accordion-vh-100" id="myAccordion">
<div class="card">
<a class="card-header" href="#collapseOne" data-toggle="collapse">
<h2 class="mb-0">Section 1</h2>
</a>
<div id="collapseOne" class="collapse" data-parent="#myAccordion">
<div class="card-body">...</div>
</div>
</div>
...
</div>
接下来,我们需要设置新 .accordion-vh-100
的样式以占据 100% 的视口高度,并显示为具有列流向的 flexbox:
.accordion-vh-100 {
height: 100vh;
display: flex;
flex-flow: column nowrap;
}
最后,我们需要扩大打开的 .card
:
.accordion-vh-100 .card.show {
flex-grow: 1;
}