Bootstrap 5图片-表单布局对齐与响应式问题修复求助

问题根源 #

1. 图片容器使用固定宽度400px，和表单的自适应宽度逻辑冲突，导致跨设备宽度不匹配
2. 表单区域额外添加了mx-4左右外边距，图片容器没有对应间距，造成对齐偏差
3. 移动端固定宽度的图片容器超出屏幕范围，触发横向滚动后视觉上出现偏移

具体修复步骤 #

1. 调整图片容器的宽度逻辑

将图片外层容器的固定宽度改为自适应父容器，同时保留固定高度和滚动特性：

.outer-container-for-image {
  width: 100%; /* 替换原400px，自适应父容器宽度 */
  height: 300px;
  overflow: auto;
}

2. 统一图片与表单的左右间距

给图片所在的row添加和表单一致的mx-4类，保证两者左右对齐：

<div class="col-12">
  <!-- 添加mx-4类，和表单区域保持一致间距 -->
  <div class="row mx-4">
    <div class="outer-container-for-image">
      <div class="inner-container-for-image">
        <img src="https://i.ibb.co/zsLb5NY/large-beach.png" alt="Big image">
      </div>
    </div>
  </div>
</div>

3. 可选：让图片初始位置居中（解决移动端偏右问题）

如果需要图片默认显示中间区域，添加一段JS设置初始滚动位置：

<script>
  const outerImgContainer = document.querySelector('.outer-container-for-image');
  // 计算并设置滚动到中间位置
  outerImgContainer.scrollLeft = (outerImgContainer.scrollWidth - outerImgContainer.clientWidth) / 2;
  outerImgContainer.scrollTop = (outerImgContainer.scrollHeight - outerImgContainer.clientHeight) / 2;
</script>

完整修改后的代码片段 #

CSS部分（仅保留自定义样式）

.outer-container-for-image {
  width: 100%;
  height: 300px;
  overflow: auto;
}

.inner-container-for-image {
  position: relative;
  width: 1000px;
  height: 800px;
}

.inner-container-for-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.order-form .container {
  color: #4c4c4c;
  padding: 20px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  max-width: 650px;
}

.order-form-label {
  margin: 8px 0 0 0;
  font-size: 14px;
  font-weight: bold;
}

HTML部分

<section class="order-form m-4">
  <div class="container pt-4">
    <div class="row">

      <div class="col-12">
        <div class="row mx-4">
          <div class="outer-container-for-image">
            <div class="inner-container-for-image">
              <img src="https://i.ibb.co/zsLb5NY/large-beach.png" alt="Big image">
            </div>
          </div>
        </div>
      </div>


      <div class="col-12">
        <div class="row mt-3 mx-4">
          <div class="col-12">
            <label class="order-form-label" for="text-field">Name</label>
          </div>
          <div class="col-12">
            <div class="form-outline datepicker" data-mdb-toggle-button="false">
              <input type="text" class="form-control order-form-input" id="text-field" />
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.1/js/bootstrap.min.js"></script>
<script>
  const outerImgContainer = document.querySelector('.outer-container-for-image');
  outerImgContainer.scrollLeft = (outerImgContainer.scrollWidth - outerImgContainer.clientWidth) / 2;
  outerImgContainer.scrollTop = (outerImgContainer.scrollHeight - outerImgContainer.clientHeight) / 2;
</script>

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