Я получил ряд с одним аккордеоном и двумя картами (может быть изображения или что-то еще), как на этом рисунке:
Я используюКласс h-100 от начальной загрузки, чтобы все карточки в ряду всегда имели одинаковую высоту.
Но я не могу понять, как это сделать с аккордеонами.
Я добавил немногоJQuery, так что у моего аккордеона всегда одна раскрытая карта, и я хочу, чтобы тело карты использовало как можно большую высоту.
Как мне этого достичь?
<div class="container">
<div class="row">
<div class="col d-flex flex-column">
<div class="accordion accordion-always-open h-100" id="accordionExample">
<div class="card align-self-stretch">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" type="button" 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 align-self-stretch" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body h-100">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</button>
</h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
</div>
</div>
<div class="col d-flex flex-column">
<div class="card border-success mb-3 h-100" style="max-width: 18rem;">
<div class="card-header bg-transparent border-success">Header</div>
<div class="card-body text-success">
<h5 class="card-title">Big card</h5>
<p class="card-text">I want the accordion next to this card to have the same height as this card</p>
<p class="card-text">I want the accordion next to this card to have the same height as this card</p>
<p class="card-text">I want the accordion next to this card to have the same height as this card</p>
<p class="card-text">I want the accordion next to this card to have the same height as this card</p>
</div>
<div class="card-footer bg-transparent border-success">Footer</div>
</div>
</div>
<div class="col d-flex flex-column">
<div class="card border-success mb-3 h-100" style="max-width: 18rem;">
<div class="card-header bg-transparent border-success">Header</div>
<div class="card-body text-success">
<h5 class="card-title">Less content</h5>
<p class="card-text">This card has same size but has less content</p>
</div>
<div class="card-footer bg-transparent border-success">Footer</div>
</div>
</div>
</div>
</div>
<script>
$('.accordion-always-open').on('show.bs.collapse', function () {
$(this).data('isShowing', true);
});
$('.accordion-always-open').on('hide.bs.collapse', function (event) {
if (!$(this).data('isShowing')) {
event.preventDefault();
}
$(this).data('isShowing', false);
});
</script>
JsFiddle