在使用引导折叠元素时,是否有任何方法可以防止发生以下问题?
这是我的代码:
<div class="block-wrapper challenges-solutions">
<div class="container">
<div class="row">
<div class="col-12 col-md-6">
<div class="challenge-solution-header">
<h3><i class="fab fas fa-file-contract"></i><span>Title 1</span></h3>
</div>
<div class="challenge-solution-body">
<button class="btn challenges-btn" type="button" data-toggle="collapse" data-target="#expand-1" aria-expanded="false" aria-controls="expand-1">
Challenge
</button>
<button class="btn solutions-btn" type="button" data-toggle="collapse" data-target="#expand-2" aria-expanded="false" aria-controls="expand-2">
Solution
</button>
</div>
<div class="challenge-solution-footer">
<div class="collapse" id="expand-1">
<div class="card card-body">
Expand 1 text
</div>
</div>
<div class="collapse" id="expand-2">
<div class="card card-body">
Expand 2 text
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="challenge-solution-header">
<h3><i class="fab fas fa-file-contract"></i><span>Title 2</span></h3>
</div>
<div class="challenge-solution-body">
<button class="btn challenges-btn" type="button" data-toggle="collapse" data-target="#expand-3" aria-expanded="false" aria-controls="expand-1">
Challenge
</button>
<button class="btn solutions-btn" type="button" data-toggle="collapse" data-target="#expand-4" aria-expanded="false" aria-controls="expand-2">
Solution
</button>
</div>
<div class="challenge-solution-footer">
<div class="collapse" id="expand-3">
<div class="card card-body">
Expand 1 text
</div>
</div>
<div class="collapse" id="expand-4">
<div class="card card-body">
Expand 2 text
</div>
</div>
</div>
</div>
</div>
以下是该问题的再现:
jsfiddle
我认为问题出在排课上。它将始终扩展侧柱以匹配高度。有办法防止这种情况吗?