如何解决使手风琴达到最大高度,并使每个单独的窗格达到整个视口高度 引导程序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>
我已经问过一些类似的问题,到目前为止,没有一个问题有帮助。尽管卡体内的内容量很大,我仍需要根据用户的观点将section1的卡体取为全高,然后将section2的卡头一直推到手风琴的底部。任何帮助或进一步的参考表示赞赏。
[这就是我现在得到的结果->] 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>
这里我们在style="height: 85vh;"
上应用了<div class="card-body">
,以将其高度增加到视口高度的85%。
如果要添加更多卡,则需要减小此高度,以在其中一张卡扩展时显示其他卡头。
,基本思想是将手风琴高度设置为100%视口高度,在列方向上将手风琴显示为flexbox,并扩大打开的部分(使用flex-grow:1;)
,以便它会垂直占据剩余空间。
通过这种方式,您不必为任何数字硬编码高度。
如果Bootstrap能够扩展折叠插件,那么我可以将其添加为纯CSS,这样我就可以向具有可折叠子代的父代添加任何CSS类。当前,当您单击标题时,可折叠部分打开,并且.show
类仅添加到该可折叠部分,而不是其父类.card
。
要确定哪个.card
是打开的,我们需要使用Bootstrap Collapse Events的以下JavaScript:
$(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');
});
});
在这里,当我们切换可折叠对象时,我在其父类.show
上添加/删除了CSS类.card
。
现在我们知道打开.card
的可折叠子代时打开了哪个.accordion-vh-100
。我们可以开始编写CSS,以使手风琴占据100%的视口高度。
首先,我想为此100%视口高度功能引入一个单独的CSS类。我们称之为.card-header
。我进行的另一项更改是将.card-header
从div更改为锚标记,以便可以单击整个<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
接下来,我们需要设置新的.accordion-vh-100 {
height: 100vh;
display: flex;
flex-flow: column nowrap;
}
的样式以使其占据100%的视口高度,并显示为具有列流向的flexbox:
.card
最后,我们需要扩展打开的.accordion-vh-100 .card.show {
flex-grow: 1;
}
:
;with max_prior_pk_cte as (
select tt.pk,tt.pk2,max(ttt.pk) max_pk
from
#testTable tt
join
#testTable ttt on tt.pk2=ttt.pk2
and tt.pk>ttt.pk
where tt.[status] is null
and ttt.[status] in ('old','new')
group by tt.pk,tt.pk2)
select
t.*,t_prior.[status] new_status
from
#testTable t
left join
max_prior_pk_cte mppc on t.pk=mppc.pk
left join
#testTable t_prior on mppc.max_pk=t_prior.pk;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。