切换/扩展卡时同位素重叠问题

Question

我将同位素用于工作清单过滤，并为每个项目使用Bootstrap卡，单击扩展/折叠按钮可以切换每个卡以显示更多信息，该卡在处于的状态下会堆叠到另一张卡上扩展，并且页脚也重叠，是否可以通过下面的现有代码解决此问题？

带有切换以展开/折叠的卡片：

    <div class="col-12 mb-5 london-uk human-capital-management">
        <div class="card box h-100">
            <div class="card-body px-5 py-5 my-auto">
                <div>
                    <p>System Consultant</p>
                    <p class="bold text-uppercase">Marketing Data Associate</p>
                    <div class="d-flex flex-row justify-content-between align-items-center">
                        <span class="medium mb-0"><i class="fa fa-map-marker fa-lg text-green" aria-hidden="true"></i> London, UK</span>
                        <span><a href="#career-1" class="btn-more-1 btn-outline-success text-uppercase px-0" data-toggle="collapse">Read More</a></span>
                    </div>
                </div>
                <div class="collapse" id="career-1">
                    <div class="row">
                        <div class="col-md-8">
                        <!-- wp:paragraph -->
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
                        <!-- /wp:paragraph -->                                    
                        <h4 class="text-uppercase my-4">Responsibilities</h4>
                        <ul>
                            <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
                            <li>Aliquam tincidunt mauris eu risus.</li>
                        </ul>
                        <h4 class="text-uppercase my-4">Requirements</h4>
                
                        <ul>
                            <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
                            <li>Aliquam tincidunt mauris eu risus.</li>
                        </ul>
                    </div>
                </div>
                <a href="#career-1" class="btn-less-1 btn-outline-success pull-right text-uppercase" data-toggle="collapse">Read Less</a>
                <hr class="hr mt-5 mb-4">
                <a href="#" class="btn-submit reverse pull-right text-uppercase">Apply</a>
            </div>
        </div>
    </div>

    <!-- another card here and so on -->
    <div class="col-12 mb-5 new-york-usa engineering-consulting">
        ...
    </div>

</div>

同位素：

var $grid = $('.grid').isotope({
    layoutMode: 'fitRows',
    itemSelector: '.col-12',
    filter: function() {
        var $this = $(this);
        var searchResult = qsRegex ? $this.text().match(qsRegex) : true;
        var selectResult = selFilter ? $this.is(selFilter) : true;
        return searchResult && selectResult;
    }
});

$('#industries, #location').on('change', function(){
    selFilter = this.value;
    $grid.isotope();
});