如何删除Bootstrap中Header与登录Card组件间的多余间距

问题根源分析 #

你的布局中存在两个核心导致间距的原因：

1. 承载表单的容器使用了min-vh-100 d-flex align-items-center，这个组合会让容器强制占满整个视口高度，并将内部表单垂直居中，直接导致Header和表单之间出现空白区域。
2. Header组件的py-5类添加了较大的上下内边距，进一步拉大了与下方表单的距离。

具体解决方案 #

方案一：调整表单容器布局（推荐）

移除容器的min-vh-100和align-items-center，改用内边距控制表单与Header的距离，同时保留水平居中：

<div class="container d-flex justify-content-center py-3">
  <form class="card p-3 bg-light">
    <!-- 原有表单内容不变 -->
  </form>
</div>

• py-3可以根据需求调整为py-2、py-1甚至py-0，精准控制顶部间距。
• 这种方式符合Bootstrap布局逻辑，避免复杂的垂直居中冲突。

方案二：修改Header内边距+负margin拉近距离

如果需要保留Header的整体上下内边距，可单独减少底部内边距，同时给表单容器加负margin抵消剩余间距：

<header class="bg-primary py-5 pb-2 text-center">
  <!-- 原有Header内容不变 -->
</header>

<div class="container min-vh-100 d-flex justify-content-center align-items-center mt-n3">
  <form class="card p-3 bg-light">
    <!-- 原有表单内容不变 -->
  </form>
</div>

• pb-2减少Header的底部内边距，mt-n3是Bootstrap的负margin类，将表单容器向上拉，可根据实际效果调整n3为n2/n4。

方案三：自定义CSS精准控制

如果类调整不够灵活，可添加自定义CSS覆盖默认间距：

/* 移除Header默认底部margin（若存在） */
header {
  margin-bottom: 0 !important;
}

/* 强制设置表单容器顶部间距 */
.form-container {
  margin-top: 0.5rem !important; /* 可直接设为0消除间距 */
}

给表单容器添加自定义类：

<div class="container min-vh-100 d-flex justify-content-center align-items-center form-container">
  <!-- 原有表单内容不变 -->
</div>

内容的提问来源于stack exchange，提问作者Eminent Emperor Penguin