如何基于Bootstrap在大屏设备响应式复现UI，解决圆形元素定位问题

核心思路 #

放弃固定padding-top这类硬编码值，改用相对定位+绝对定位或Flex布局，结合Bootstrap的lg:断点类（针对≥991px设备），让圆形元素始终相对于竖线实现垂直居中，适配不同尺寸的大屏设备。

方法一：Bootstrap定位工具类+自定义CSS #

1. 给竖线容器添加position-relative，作为圆形图标的定位参考容器
2. 给圆形图标叠加position-absolute+top-50+translate-middle-y（Bootstrap内置工具类，自动实现垂直居中），搭配lg:前缀确保仅在大屏生效
3. 竖线高度改用相对单位（如vh），避免固定高度导致的适配问题

示例代码片段：

<!-- 竖线所在列容器 -->
<div class="col-lg-2 position-relative">
  <!-- 竖线图标 -->
  <div class="vertical-line" style="height: 80vh; border-left: 2px solid #ddd;"></div>
  <!-- 圆形图标 -->
  <div class="circle-icon position-absolute top-50 translate-middle-y lg:start-50" style="width: 42px; height: 42px; border-radius: 50%; background-color: #0d6efd; z-index: 1;">
    <!-- 图标内容 -->
  </div>
</div>

方法二：Flex布局快速居中 #

利用Bootstrap的d-lg-flex+align-items-center工具类，让竖线和圆形图标处于同一Flex容器，直接实现垂直居中：

<div class="col-lg-2 d-lg-flex align-items-center justify-content-center">
  <!-- 竖线图标（设为绝对定位避免占据布局空间） -->
  <div class="vertical-line position-absolute" style="height: 80vh; border-left: 2px solid #ddd;"></div>
  <!-- 圆形图标（z-index确保不被竖线遮挡） -->
  <div class="circle-icon" style="width: 42px; height: 42px; border-radius: 50%; background-color: #0d6efd; z-index: 1;">
    <!-- 图标内容 -->
  </div>
</div>

关键注意事项 #

• 拒绝固定rem值的内边距/外边距，改用vh、百分比这类相对单位，或Bootstrap内置的my-auto等间距工具类
• 所有适配样式都加上lg:前缀，确保仅作用于大屏设备
• 给圆形图标设置z-index，避免被竖线元素遮挡

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