基于Bootstrap 5响应式设计消除页面垂直滚动条问题

滚动条问题修复 #

页面出现垂直滚动条的核心原因是.image类的相对定位设置：position: relative搭配bottom: 10%会让图片向下偏移，但图片原本的占位空间依然保留，直接撑高了父容器，多出的空白区域触发了滚动条。

修改方案：

1. 给图片的父容器.col-md-7添加position: relative，让它成为绝对定位的参考容器
2. 将.image的position: relative改为position: absolute，这样图片偏移不会占用原空间

调整后的关键CSS代码：

/* 图片父容器设置相对定位 */
.col-md-7 {
  position: relative;
  min-height: 300px; /* 避免容器为空时高度塌陷 */
}

.image {
  position: absolute; /* 替换原有的relative */
  bottom: 10%;
  height: 75%;
  right: 5%;
}

Bootstrap Row/Col的高度逻辑 #

• 默认自适应内容：row和col默认没有固定高度，高度完全由内部元素的总高度决定。
• Flex布局特性：row是flex容器，内部的col默认会被拉伸到与最高列同高（默认align-items: stretch）。
• 相对定位的隐患：如果内部元素用position: relative做偏移，元素的占位空间不会消失，父容器会保留这个空间，容易导致不必要的高度溢出。
• 无需手动改高度的布局技巧：如果不想手动设置容器高度，优先用绝对定位（配合父容器相对定位）或调整内边距/外边距来控制元素位置，避免用相对定位偏移调整布局。

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