Bootstrap卡片间距设置与页面滚动重叠问题技术求助

1. 屏幕缩小时#benefits与#home内容重叠问题 #

原因 #

你给#home和#benefits都设置了固定高度height:100vh，但小屏幕设备上，#home内的文本、图片总高度会超过100vh，导致内容溢出到下方的#benefits区域，视觉上形成重叠。

解决方案 #

将两个section的height:100vh替换为min-height:100vh，这样section会至少占满视口高度，当内容超出时自动撑开高度，避免内容溢出重叠：

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

#benefits {
    background-color: #fff;
    width: 100%;
    min-height: 100vh; /* 替换height为min-height */
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-content: space-around;
    align-items: center;
}

2. Bootstrap卡片均匀间距且每行2张问题 #

原因 #

Bootstrap网格基于12列布局，直接给col-lg-6的卡片添加左右margin会导致列总宽度超过12列，触发换行。

解决方案 #

利用Bootstrap内置的gutter间距类，在包含卡片的row上添加g-*类（比如g-4，数值可按需调整），自动控制列之间的水平间距；保留mb-5控制垂直间距，无需手动给卡片加左右margin：

修改后的HTML（仅row部分）：

<section id="benefits">
    <div class="row container mx-auto g-4"> <!-- 添加g-4类设置水平间距 -->
        <div class="benefit text-center mb-5 col-lg-6 col-md-6 col-12">
            <!-- 卡片内容保持不变 -->
        </div>
        <div class="benefit text-center mb-5 col-lg-6 col-md-6 col-12">
            <!-- 卡片内容保持不变 -->
        </div>
        <div class="benefit text-center mb-5 col-lg-6 col-md-6 col-12">
            <!-- 卡片内容保持不变 -->
        </div>
    </div>
</section>

如果需要更自定义的间距，也可以给benefit类添加内边距替代外边距，避免破坏网格布局：

#benefits .benefit{
    border: 3px solid #1F4682;
    border-radius: 10px;
    color: #fff;
    background-color: #22aadf;
    padding: 1rem; /* 添加内边距替代外边距 */
}

内容的提问来源于stack exchange，提问作者Saga Ibrahim