如何使用Bootstrap 5实现适配桌面与移动端的响应式分屏？

布局无法自适应、元素不随视口缩放，核心是几个写法问题：

• Bootstrap栅格要求row必须放在container或container-fluid容器内，直接裸写row会导致栅格的宽度计算、边距规则完全不生效
• 自定义CSS给文本框、按钮写了大量top/left/transform绝对定位属性，元素完全脱离文档流，父级栅格列的宽度约束根本作用不到这些元素，自然不会跟着容器缩放
• 图片未添加Bootstrap响应式图片类，默认按原始尺寸渲染，无法跟随父容器适配大小
• 大量使用vw单位给元素定宽、定字号，元素尺寸直接参考全局视口宽度，不会受父列宽度约束，移动端会出现尺寸错乱

把原有脱离文档流的定位属性全部删掉，优先用Bootstrap自带的工具类实现布局，不要硬写固定偏移值。

修正后的CSS #

#promotion-textbox {
  background-color: white;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

#promotion-title {
  padding: 1.5rem;
  color: #23272a;
  /* 用clamp限制字号区间，避免大屏字过大、小屏字过小 */
  font-size: clamp(1rem, 2vw, 1.5rem);
}

#promotion-button {
  opacity: 0.8;
  /* 宽度参考父容器而非全局视口 */
  width: 80%;
  margin: 1rem auto;
}

修正后的HTML #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<!-- 补全栅格必需的外层容器 -->
<div class="container-fluid px-0">
  <!-- g-0去掉列默认间距，实现无缝分屏 -->
  <div class="row g-0 min-vh-100">
    <!-- 左侧列：移动端满宽，桌面端占一半宽度 -->
    <div class="col-12 col-md-6">
      <!-- 加响应式类让图片自动适配父容器宽度 -->
      <img class="img-fluid w-100 h-100 object-fit-cover" src="你的宣传图地址" alt="宣传展示图">
    </div>
    
    <!-- 右侧列：移动端满宽，桌面端占一半宽度 -->
    <div class="col-12 col-md-6 d-flex align-items-center p-4">
      <div id="promotion-textbox" class="w-100">
        <div id="promotion-title">
          Duck Zone is the best game of all time, I mean just look at these awesome reviews:<br><br>
          TheP0mp21 Says:<br>
          - Game is pretty good but it needs a your mum duck that is extremely fat and spawns other ducks.
        </div>
        <button id="promotion-button" class="btn btn-primary d-block">按钮文案</button>
      </div>
    </div>
  </div>
</div>

• 桌面端（视口宽度≥768px）：自动呈现左右两列各占50%的分屏结构，图片铺满左列，文本内容在右列垂直居中，所有元素跟随列宽自动缩放
• 移动端（视口宽度<768px）：自动切换为单列上下排布，图片在上、内容在下，无元素溢出、错位问题
• 字号、按钮尺寸都做了区间限制，不会在不同尺寸屏幕下出现比例失调

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