如何解决窗口缩小时Bootstrap登录页面Div重叠问题？

核心问题根源 #

你的问题本质是垂直空间分配不合理：小窗口时元素没有足够空间导致重叠，大窗口时主内容区无法自适应剩余空间，出现多余空白。直接用min-height:100vh无法兼顾两种场景，需要结合Bootstrap 5的Flex布局类来实现自适应。

具体解决方案 #

1. 调整HTML结构（利用Bootstrap内置Flex类）

给外层section添加垂直Flex布局和最小视口高度类，同时让主内容区自动填充剩余空间：

<section class="d-flex flex-column min-vh-100">
  <!-- 主内容区：logo + 登录表单 -->
  <div class="flex-grow-1 d-flex flex-column align-items-center justify-content-center p-3">
    <!-- Logo容器，添加间距避免和表单紧贴 -->
    <div class="mb-5">
      <img src="你的logo路径" alt="站点Logo" class="img-fluid" style="max-width:200px;">
    </div>
    <!-- 登录表单，限制最大宽度保证美观 -->
    <form class="w-100" style="max-width:400px;">
      <div class="mb-3">
        <label for="userEmail" class="form-label">邮箱</label>
        <input type="email" class="form-control" id="userEmail" placeholder="请输入邮箱">
      </div>
      <div class="mb-3">
        <label for="userPwd" class="form-label">密码</label>
        <input type="password" class="form-control" id="userPwd" placeholder="请输入密码">
      </div>
      <button type="submit" class="btn btn-primary w-100">登录</button>
    </form>
  </div>
  <!-- 页脚社交链接区 -->
  <div class="p-4 bg-light text-center">
    <a href="#" class="me-3 text-dark">Facebook</a>
    <a href="#" class="me-3 text-dark">Twitter</a>
    <a href="#" class="text-dark">Instagram</a>
  </div>
</section>

2. 清理冲突CSS

修改loginStyles.css，移除之前设置的min-height:100vh（主内容区的），避免和Bootstrap类冲突：

/* 移除主内容区的min-height:100vh设置 */
/* 保留必要的自定义样式即可，比如： */
.form-label {
  font-weight: 500;
}
.bg-light {
  background-color: #f8f9fa !important;
}

方案原理 #

• d-flex flex-column min-vh-100：让section至少占满视口高度，内部元素垂直排列
• flex-grow-1：主内容区自动填充section除页脚外的所有垂直空间，大窗口时页脚固定在底部，无多余空白；小窗口时内容高度超过视口，页面自动滚动，避免元素重叠
• 主内容区内部的d-flex flex-column align-items-center justify-content-center：让logo和表单始终垂直水平居中，同时p-3内边距防止元素贴边
• 表单设置max-width:400px：保证大屏幕上表单不会过宽，小屏幕自动占满宽度

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