我正在使用Bootstrap 4创建网站。 （https://www.cs.tau.ac.il/~anatgilenson/Megilot/） 我希望高度可变的可折叠列表在砌体网格中对齐。我需要列表按从右到左和从上到下的顺序进行排序，这是Bootstrap的4卡栏不允许的。但是，尝试使用Masonry JS进行操作时，我遇到了一个问题：列表在首次加载页面时重叠。最小化然后最大化屏幕似乎可以解决问题，但是我希望列表在页面加载时能够正确对齐。
这是我的HTML的一部分（只是在完整的HTML中多次复制粘贴了列表）。您可以在底部找到Masonry JavaScript。
<!doctype html>
<html lang="he">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css">
<title>Hello, world!</title>
</head>
<header>
<nav class="navbar main-nav navbar-expand-md navbar-dark d-flex fixed-top pt-3 pb-3 border-bottom">
<div class="navbar-collapse collapse w-100 dual-collapse2">
<ul class="navbar-nav mr-auto flex-row-reverse">
<li class="nav-item active">
<a class="nav-link" href="#">ראשי</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">כיצד משתמשים?</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">אודות</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">יצירת קשר</a>
</li>
</ul>
</div>
<div class="navbar-collapse collapse dual-collapse2 w-100 flex-row-reverse">
<h2 class='display-4 pr-1 pl-3'>המגילות - תוצאות חיפוש</h2>
<span class='navbar-text'>מציג 100 תוצאות</span>
</div>
</nav>
</header>
<body>
<div class="container-fluid my-container">
<div class='flex-row-reverse d-flex justify-content-center'>
<div class='col-2 my-column px-0'>
<div class='d-flex flex-row sticky-top sticky-offset justify-content-center'>
<form class='border-left pr-3 pl-2 my-3'>
<div class="form-group text-right">
<label for="example-text-input" dir="rtl" lang="he" class="text-center">תבנית
חיפוש:</label>
<textarea class="form-control text-right" name="letters" id="letters" dir="rtl" lang="he"
type="text" rows='4' placeholder="יש להכניס כל סדרת אותיות חדשה בשורה חדשה"
required=""></textarea>
</div>
<div class="form-group text-right">
<label for="example-number-input" dir="rtl" lang="he" class="text-center">מספר
תווים במקטע:</label>
<select class="form-control" dir="rtl" name="text-length" id="text-length">
<option>1-50</option>
<option>51-100</option>
<option>101-150</option>
<option>151-200</option>
</select>
</div>
<div class="form-group text-right">
<label dir="rtl" lang="he" class="text-center">שפה:</label>
<select class="form-control text-right" dir="rtl" name="language" id="language">
<option>עברית</option>
<option>אנגלית</option>
</select>
</div>
<div class="form-group text-right">
<label for="example-url-input" dir="rtl" lang="he" class="text-center">קישור
לטקסט:</label>
<input class="form-control" name="text-url" id="text-url" type="url"
placeholder="https://google.com" required="">
</div>
<div class="form-group d-flex flex-row justify-content-center">
<button class="snip1431">חיפוש</button>
</div>
</form>
</div>
</div>
<div class='col-10 text-right' dir='rtl'>
<div class="container-fluid">
<div class="grid">
<!-- 2 col grid @ xs, 3 col grid @ sm, 4 col grid @ md -->
<div class="grid-sizer col-lg-4 col-md-6 col-sm-12"></div>
<!-- 1 col @ xs, 2 col @ sm, 2 col @ md -->
<div class="grid-item col-lg-4 col-md-6 col-sm-12">
<div class="list-group filter-wrap">
<article class="list-group-item">
<header class="filter-header">
<a href="#" data-toggle="collapse" data-target="#collapse1" aria-expanded="true"
class="">
<i class="icon-action fa fa-chevron-down"></i>
<h6 class="title">lorem</h6>
</a>
</header>
<div class="filter-content collapse show" id="collapse1" style="">
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium culpa
repellendus, dolorem voluptate sed tempora vitae temporibus sit facere
labore ut ab placeat minus totam incidunt voluptatem maiores commodi at.
</p>
</div> <!-- collapse -filter-content .// -->
</article>
<article class="list-group-item">
<header class="filter-header">
<a href="#" data-toggle="collapse" data-target="#collapse2">
<i class="icon-action fa fa-chevron-down"></i>
<h6 class="title" dir="rtl">lorem</h6>
</a>
</header>
<div class="filter-content collapse" id="collapse2">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat similique
odio saepe perferendis maiores quidem delectus molestias incidunt cupiditate
animi quas porro consequatur, adipisci qui debitis pariatur iusto nisi
repellendus. </p>
</div>
</article>
</div>
</div>
<!--end of first list item-->
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script type="text/javascript">
(function ($) {
var $masonry = $('.grid');
$masonry.masonry({
// options
itemSelector: '.grid-item',
columnWidth: '.grid-sizer',
percentPosition: true,
originLeft: false
}).on('shown.bs.collapse hidden.bs.collapse', function () {
$masonry.masonry();
});
})(jQuery);
</script>
</body>
</html>
这是CSS：
header {
color: rgb(241, 241, 241)
}
.navbar a {
direction: rtl
}
.navbar {
background-color: black;
}
body {
background: url('background.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
color: rgb(241, 241, 241);
}
.sticky-offset {
top: 79.4px;
}
body .my-container {
position: relative;
top: 79.4px;
padding-left: 0px;
padding-right: 0px;
}
a {
color: #2e80b6
}
article.list-group-item {
background-color: rgba(255, 255, 255, 0.8);
color: black
}
.icon-action {
margin-top: 5px;
float: left;
font-size: 80%;
}
.list-group-item .title {
margin-top: 5px;
margin-bottom: 12px;
font-weight: 600;
}
.list-group h6 {
color: #1c6bff
}
.list-group a {
color: #1c6bff
}
.display-4 {
font-size: 25px;
}
.grid-item{
margin-bottom: 2px;
padding:3px;
}
.container-fluid{
padding: 5px 0px 0px 0px;
}
请帮助：（