我不知道如何为我的引导卡添加间距，当我向上滚动到卡片部分时，我的页面不断重叠

I cant figure out how to add spacing to my bootstrap cards and my page keeps overlapping when I scroll up to the cards section

提问人：Saga Ibrahim 提问时间：10/4/2023 最后编辑：NazarSaga Ibrahim 更新时间：10/5/2023 访问量：30

问：

我正在创建一个登录页面，该页面在滚动时具有不同的部分。我有 2 个问题。

  1. 当我向下滚动时，当我缩小屏幕时，第二部分的内容与页面的顶部重叠。
  2. 我希望我的卡片之间有均匀的间距，我已经尝试了所有方法，但是如果我添加间距..然后它将卡片推到一个全新的行。我想要 2 张每行间距均匀的卡片。

HTML 代码和 CSS 代码：

#home{
    background-color: #22AADF;
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: top 60px center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

#home h1{
    font-size: 3rem;
    color: #1F4682;
}
#home span{
    color: #fff;
}
#home h4{
    color: #fff;
    font-weight: 400;
}
#home .img {
    width: 100%;
    height: 100%;
}
#benefits {
    background-color: #fff;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-content: space-around;
    align-items: center;
}
#benefits .benefit{
    border: 3px solid #1F4682;
    border-radius: 10px;
    color: #fff;
    background-color: #22aadf;
}
#benefits .benefit .benefit-header{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    font-size: 1.5em;
    text-align: center;
    margin: 15px;
}
#benefits .benefit i{
    margin-right: 20px;
}
#benefits .benefit h4{
     margin-top: 2px;
}
#benefits hr{
    color: #1F4682;
    width: 100%;
    height: 2px;
}
<section id="home">
        <div class="container">
            <div class="row">
                <div class="mx-auto col-lg-6 col-md-6 col-12">
                    <h1 class="mb-5">Unlock the Power of <span>Artifical Intelligence</span> for Personalization and Customer Engagement.</h1>
                    <h4 class="mb-4">Elevate Your Marketing with Our Latest E-book.</h4>
                    <button>DOWNLOAD NOW</button>   
                </div>
                <div class="hero2 col-lg-6 col-md-6 col-12">
                    <img class="img img-fluid" src="ai2.png" alt="img-of-ai">
                </div>
            </div>
        </div>
    </section>
    
        
    <section id="benefits">
        <div class="row container mx-auto">
            <div class="benefit text-center mb-5 col-lg-6 col-md-6 col-12">
                <div class="benefit-header">
                    <i class="fa-solid fa-person-arrow-up-from-line"></i>
                    <h4>Boost Customer Engagement</h4>
                </div>
                <hr>
                <p>AI algorithms analyze user behavior and preferences to deliver relevant content, increasing user engagement and interaction with your brand.</p>
            </div>
            <div class="benefit text-center mb-5 col-lg-6 col-md-6 col-12">
                <div class="benefit-header">
                    <i class="fa-solid fa-person-arrow-up-from-line"></i>
                    <h4>Boost Customer Engagement</h4>
                </div>
                <hr>
                <p>AI algorithms analyze user behavior and preferences to deliver relevant content, increasing user engagement and interaction with your brand.</p>
            </div>
            <div class="benefit text-center mb-5 col-lg-6 col-md-6 col-12">
                <div class="benefit-header">
                    <i class="fa-solid fa-person-arrow-up-from-line"></i>
                    <h4>Boost Customer Engagement</h4>
                </div>
                <hr>
                <p>AI algorithms analyze user behavior and preferences to deliver relevant content, increasing user engagement and interaction with your brand.</p>
            </div>

HTML 重叠 Bootstrap-Cards

评论

1赞 jessman5 10/4/2023
请提供工作代码片段以重现问题
0赞 arsenik 10/5/2023
你应该把问题的标题写得更短。

答：

0赞 jessman5 10/4/2023 #1

我自己制作了一个代码，发现了以下内容：

第1项质询

这是因为在移动设备上，卡片的高度比屏幕尺寸大。为小屏幕移除 100vh。如果您不是 100% 确定它的所有内容都绝对适合移动视口（高度明智），也许也是如此。#benefits#home

第2项质询

不适用于给定的代码示例，只有 3 张卡片，不能有“每行 2 张”，因为它只有一行有 2 张卡片。

如果会有更多卡片，那么您可以执行以下操作：

上：#benefits

display: flex;
flex-direction: row; //not column
align-content: space-around;
flex-wrap: wrap; //important to have rows

上：.benefit

将宽度与类一起添加，并添加一个col-margin-bottom

上一个：Rails 表单批量编辑验证

下一个：li在嵌套列表中重叠（导航菜单）