仅在第一页加载时出现列重叠的情况

Question

嗨，我正在使用Bootstrap 4，我在这里工作的一个项目 http:/eatout.sanaalitech.comroducts.php。 我面临着一个非常奇怪的问题，我使用的是bootstrap网格，我的栏目在第一页加载时重叠，只有在移动视图上，在桌面上可以正常工作，当我刷新页面时，在移动端也可以正常工作。我试过以下方法，但还是不行 1) .col-lg-3{ display:block; position:relative;}2) 我试过把每4个产品都围成一行，而不是像这样把所有产品都围成一行。

这里的内容这里的内容这里的内容这里的内容这里的内容这里的内容这里的内容这里的内容这里的内容这里的内容这里的内容这里的内容这里的。

3）我也完全删除了这个，然后用卡片重新做了一次，但它们也只在移动视图的第一次加载时重叠。

问题只出现在第一次加载。

我已经添加了图像在第一次加载页面。

<div class="container" style="margin-top:5em;">
     <div class="row ">
        <div class="col-lg-12" >
            <ul class="filter-tabs text-center">
                <li data-filter=".maincourse"><a href="#!" >Main Courses</a></li>
                <li data-filter=".desserts"><a href="#!" id="desserts">Desserts</a></li>
                <li class="active" data-filter="*"><a href="#!">View All</a></li>
                <li data-filter=".starters"><a href="#!">Starters</a></li>
                <li data-filter=".extras"><a href="#!">Extras</a></li>
            </ul>
            <div class="projects">
                <div class="row">


                        <div class="col-lg-3 item maincourse mb-3" >
                            <div class="product ">
                                <img src="Images/banner-image4.jpg" class="img-fluid">
                                <div class="text-center mb-3 mt-3">
                                    <h4>Meal Platter</h4>
                                    <h7>£8.99</h7>
                                </div>
                            </div>

                        </div>

                        <div class="col-lg-3  item desserts mb-3" >
                            <div class="product ">
                                <img src="Images/dessert.jpg" class="img-fluid">
                                <div class="text-center mb-3 mt-3">
                                    <h4>Meal Platter</h4>
                                    <h7>£8.99</h7>
                                </div>
                            </div>
                        </div>


                            <div class="col-lg-3 item maincourse mb-3">
                                <div class="product ">
                                        <img src="Images/main-meal-5.jpg" class="img-fluid img-filter">
                                        <div class="text-center mb-3 mt-3">
                                            <h4>Meal Platter</h4>
                                            <h7>£8.99</h7>
                                        </div>
                                </div>
                            </div>


                            <div class="col-lg-3  item starters mb-3">
                                <div class="product ">
                                    <img src="Images/banner-image3.jpg" class="img-fluid">
                                    <div class="text-center mb-3 mt-3">
                                        <h4>Meal Platter</h4>
                                        <h7>£8.99</h7>
                                    </div>
                                </div>
                            </div>



                            <div class="col-lg-3 item maincourse mb-3">
                                <div class="product ">
                                    <img src="Images/main-meal-2.jpg" class="img-fluid">
                                    <div class="text-center mb-3 mt-3">
                                        <h4>Roll Platter</h4>
                                        <h7>£8.99</h7>
                                    </div>
                                </div>

                            </div>

                            <div class="col-lg-3 item starters mb-3">
                                <div class="product ">
                                    <img src="Images/main-meal-4.jpg" class="img-fluid">
                                    <div class="text-center mb-3 mt-3">
                                        <h4>Vege Starter</h4>
                                        <h7>£7.99</h7>
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-3 item desserts mb-3">
                                <div class="product ">
                                    <img src="Images/dessert-2.jpg" class="img-fluid img-filter">
                                    <div class="text-center mb-3 mt-3">
                                        <h4>Rasberry cake</h4>
                                        <h7>£4.99</h7>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 item maincourse mb-3">
                                <div class="product ">
                                        <img src="Images/main-meal-3.jpg" class="img-fluid">
                                        <div class="text-center mb-3 mt-3">
                                            <h4>Burger Meal</h4>
                                            <h7>£8.99</h7>
                                        </div>
                                </div>
                            </div>



                                <div class="col-lg-3 item extras mb-3">
                                    <div class="product">
                                        <img src="Images/extras-1.jpg" class="img-fluid">
                                        <div class="text-center mb-3 mt-3">
                                            <h4>Macaroni Sallad</h4>
                                            <h7>£7.99</h7>
                                        </div>
                                    </div>

                                </div>
                                <div class="col-lg-3 item maincourse mb-3">
                                    <div class="product ">
                                        <img src="Images/main-meal-6.jpg" class="img-fluid">
                                        <div class="text-center mb-3 mt-3">
                                            <h4>Fish & Beans</h4>
                                            <h7>£12.99</h7>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-3 item extras mb-3">
                                    <div class="product ">
                                        <img src="Images/extras-2.jpg" class="img-fluid img-filter">
                                        <div class="text-center mb-3 mt-3">
                                            <h4>Avacado Sallad</h4>
                                            <h7>£9.99</h7>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-3 item desserts mb-3">
                                    <div class="product">
                                        <img src="Images/dessert-3.jpg" class="img-fluid">
                                        <div class="text-center mb-3 mt-3">
                                            <h4>Chocolate Cake</h4>
                                            <h7>£7.99</h7>
                                        </div>
                                    </div>
                            </div>

                    </div>

                </div>

            </div>
        </div>
    </div>

Answer 1

当你的网格溢出时，在控制台运行这个。

(代码来自javascript.js第217行)

 var $projects = $(".projects");
   $projects.isotope({
     itemSelector: ".item",
     layoutMode:'fitRows'

  });

我认为这个函数在所有东西加载之前运行.我不知道这是怎么回事，因为有时这个函数一旦被调用就会解决这个问题，但大多数时候它不会。但有一点是肯定的。一个函数定义了绝对位置，所以问题出在javascript源代码的某个地方。