每次刷新页面看起来都没有大小（凌乱）

Question

我在我的网页上使用 Vue 框架，但在刷新页面时出现未调整大小的 div（尤其是导航栏）的错误。我的主页（index.vue）没有出现这个问题。它只发生在

hireABikePage

。即使我从这个页面删除所有代码（包括模板、脚本和样式）并且只存在

Navbar

，我仍然可以看到同样的问题但有点快。

这是我的

hireABikePage

文件：

<template>
    <div>
        <div class="container-fluid">
            <div class="row d-flex  align-items-center">
                <div class="col-lg-4 col-md-6 col-sm-12 d-flex justify-content-center align-items-center">
                    <div class="card d-flex justify-content-center align-items-center mb-5">
                        <img class="img-fluid my-4 " src="~assets/images/cycle.jpg" alt="cycle"/>
                        <div class="item-details w-100">
                            <h3 class="item-title">Ridley Helium X Ultegra</h3>
                            <p class="item-prefix">PER</p>
                            <p class="item-price">€30</p>
                            <p class="item-prefix">DAY</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-sm-12 d-flex justify-content-center align-items-center">
                    <div class="card d-flex justify-content-center align-items-center mb-5">
                        <img class="img-fluid my-4 " src="~assets/images/cycle2.jpg" alt="cycle"/>
                        <div class="item-details w-100">
                            <h3 class="item-title">Cube e-bike Acid Hybrid ONE 400</h3>
                            <p class="item-prefix">PER</p>
                            <p class="item-price">€25</p>
                            <p class="item-prefix">DAY</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-sm-12 d-flex justify-content-center align-items-center">
                    <div class="card d-flex justify-content-center align-items-center mb-5">
                        <img class="img-fluid my-4 " src="~assets/images/cycle3.jpg" alt="cycle"/>
                        <div class="item-details w-100">
                            <h3 class="item-title">Ridley Fenix SL Disc 105</h3>
                            <p class="item-prefix">PER</p>
                            <p class="item-price">€28</p>
                            <p class="item-prefix">DAY</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-sm-12 d-flex justify-content-center align-items-center">
                    <div class="card d-flex justify-content-center align-items-center mb-5">
                        <img class="img-fluid my-4 " src="~assets/images/cycle3.jpg" alt="cycle"/>
                        <div class="item-details w-100">
                            <h3 class="item-title">Ridley lala model x</h3>
                            <p class="item-prefix">PER</p>
                            <p class="item-price">€35</p>
                            <p class="item-prefix">DAY</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  name: 'hireABikePage'
}
</script>

<style>
    .card{
        width: 30rem !important;
        height: auto !important;
    }
    .card img{   
        max-width: 85%;
        height: 25rem;
        width: 25rem;
    }
    .item-details{
        text-align: center;
    }
    .item-title{
        font-weight: bold;
        padding-bottom: 1rem;
        overflow: hidden;
        white-space: nowrap;
        margin-right: 2rem;
        margin-left: 2rem;
    }
    .item-price{
        display: inline-block;
        color: white;
        background-color: var(--color-dark-blue);
        font-size: 5rem;
        font-weight: bold;
        padding-right: 2rem;
        padding-left: 2rem;
        border-radius: 1.5rem 1.5rem 1.5rem 1.5rem;
        vertical-align: middle;
    }
    .item-prefix{
        display: inline-block;
        color: orange;
        font-size: 2rem;
        font-weight: bold;
    }
    
</style>

这也是的截图 原创

我检查了类名是否与其他组件的类名相同，但我没有看到任何相同的类。我试图解决这个问题一天，还没有解决。感谢您的帮助！ :)