小屏幕下如何控制Bootstrap中两个区块之间的间距

算力阿峰

2026-9-28

问题原因

你当前全局为所有.row元素设置了min-height: 100vh，首页、关于我们两个区块的行元素都会默认占满至少一整个视口高度，小屏幕下内容高度不足以填满100vh时，多余的空白就是由此属性产生的，仅调整区块间距不会生效。同时全局修改.row的flex、对齐属性会破坏Bootstrap原生栅格系统的默认行为，可能引发其他布局异常。

解决步骤

给两个区块的行元素添加专属类名，避免全局样式污染
修改HTML对应部分：

<!-- 首页区块row -->
<div class="row landing-row">

<!-- 关于我们区块row -->
<div class="row about-row">

调整CSS规则，用媒体查询适配小屏幕高度
把原来全局作用于.row的样式替换为以下代码：

/* 大屏端默认保留100vh高度 */
.landing-row, .about-row {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center;
  min-height: 100vh;
}

/* 移动端适配（Bootstrap md断点以下） */
@media (max-width: 767.98px) {
  /* 可根据实际内容高度调整数值，或用fit-content让高度自适应内容 */
  .landing-row {
    min-height: fit-content;
    padding: 4rem 0;
  }
  .about-row {
    min-height: fit-content;
    padding: 2rem 0 4rem;
  }
  /* 若需进一步缩小间距，可调整容器的上下margin */
  .container:first-of-type {
    margin-bottom: 0 !important;
  }
}

额外优化建议