Bootstrap响应式布局故障：分销商板块移动端显示异常修复请求

问题概述 #

基于Bootstrap构建的分销商（distribuidores）板块出现以下响应式异常：

• PC端显示正常
• 移动端存在两个核心问题：
  • 提交按钮错位至社交图标下方（预期位置：表单下方、社交图标上方）
  • 板块图片与表单文本内容重叠
• 触发场景：仅在更换社交图标后出现该问题

原问题相关代码片段 #

<!-- 原布局结构示例 -->
<div class="row">
  <div class="col-md-6">
    <img src="distribuidor-img.jpg" alt="分销商图片">
  </div>
  <div class="col-md-6">
    <form>
      <div class="form-group">
        <label>姓名</label>
        <input type="text" class="form-control">
      </div>
      <!-- 原提交按钮 -->
      <button type="submit" class="btn btn-primary">提交</button>
    </form>
    <!-- 更换后的社交图标 -->
    <div class="social-icons">
      <a href="#"><i class="new-icon facebook"></i></a>
      <a href="#"><i class="new-icon twitter"></i></a>
    </div>
  </div>
</div>

问题截图 #

修复方案 #

1. 修正提交按钮与社交图标布局顺序 #

更换图标时可能误修改了DOM结构顺序，或图标容器的样式打断了布局流：

• 确保提交按钮在表单内部或表单紧邻的下方容器，社交图标容器在按钮之后
• 给按钮容器添加clearfix或使用Bootstrap弹性布局类强制换行：

<form>
  <!-- 表单控件 -->
  <div class="mb-3">
    <label for="name" class="form-label">姓名</label>
    <input type="text" class="form-control" id="name">
  </div>
  <!-- 提交按钮容器：添加间距与清除浮动 -->
  <div class="mt-3 clearfix">
    <button type="submit" class="btn btn-primary">提交</button>
  </div>
</form>
<!-- 社交图标容器：放在按钮之后，使用弹性布局排列 -->
<div class="d-flex justify-content-center mt-4">
  <a href="#" class="me-2 d-inline-block"><i class="new-icon facebook"></i></a>
  <a href="#" class="me-2 d-inline-block"><i class="new-icon twitter"></i></a>
</div>

2. 修复图片与表单重叠问题 #

移动端下栅格列未正确堆叠，需明确设置断点类：

• 给图片和表单所在的列添加col-12，确保移动端占满整行，避免挤压：

<div class="row">
  <!-- 图片列：PC占6，移动端占12，添加底部间距 -->
  <div class="col-md-6 col-12 mb-4 mb-md-0">
    <img src="distribuidor-img.jpg" class="img-fluid" alt="分销商图片">
  </div>
  <!-- 表单列：PC占6，移动端占12 -->
  <div class="col-md-6 col-12">
    <!-- 表单与社交图标内容 -->
  </div>
</div>

3. 消除图标样式冲突 #

部分自定义图标可能自带float或position样式，破坏布局：

• 移除图标容器或图标本身的自定义浮动/绝对定位样式
• 给图标外层<a>标签添加d-inline-block，确保在弹性布局中正确排列

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