bootstrap 4 默认在小屏幕下将 `.col-*` 类元素转为垂直堆叠，导致页脚中并排的社交图标被强制换行；通过为图标容器添加 `display: flex` 并配合合理间距控制，即可实现移动端水平居中对齐。

在使用 Bootstrap 4 构建响应式网站时，页脚（footer）中的社交媒体图标常因栅格系统在移动断点（如 标签也失去内联流式布局能力，从而逐行堆叠。

根本解决方案是脱离栅格依赖，改用 Flexbox 主动控制布局。您无需修改 HTML 结构，只需为社交图标容器（即 #sm）添加 display: flex 及配套样式：

<div class="col-md-5" id="sm" style="
  padding-left: 10%; 
  padding-bottom: 1%; 
  display: flex; 
  justify-content: center; 
  gap: 1rem;
">
  <a href="#"><img src="images/rsz_1rsz_insta.png" alt="Instagram"    style="max-width:90%"  style="max-width:90%"></a>
  <a href="#"><img src="images/rsz_twitter.png" alt="Twitter"    style="max-width:90%"  style="max-width:90%"></a>
  <a href="#"><img src="images/rsz_1facebook-removebg-preview.png" alt="Facebook"    style="max-width:90%"  style="max-width:90%"></a>
</div>

✅ 关键优化说明：

Twitter Command Center Search Post Interact

通过 AIsa 搜索 X/Twitter 的个人资料、推文、趋势并进行 OAuth 授权发布，适用于需要 Twitter 研究、监控或互动工作流的场景。

下载

• display: flex：启用弹性布局，使子元素（图标链接）默认水平排列；
• justify-content: center：在容器内水平居中对齐所有图标（替代冗余的    ）；
• gap: 1rem：统一控制图标间距（语义清晰、响应友好，比   更可靠）；
• 为 添加 width/height 属性：避免图片拉伸失真，并提升可访问性（务必补充 alt 文本）。

⚠️ 注意事项：

• 避免在 style 属性中混用内联 CSS 与媒体查询（如原 CSS 中 @media (max-width: 768px) { .col-md-5#sm { size: 1px; } } 是无效写法，size 非标准属性）；
• 推荐将上述样式移入外部 CSS 文件，例如：

  #sm {
    display: flex;
    justify-content: center;
    gap: 1rem;
  }
  @media (max-width: 768px) {
    #sm {
      padding-left: 5%;
      gap: 0.75rem; /* 移动端稍减间距 */
    }
  }

• 若需兼容旧版浏览器（如 IE11），可添加 -ms-flexbox 前缀，但 Bootstrap 4 本身已放弃 IE9–10 支持，通常无需额外处理。

通过这一轻量级 Flexbox 重构，您的页脚社交图标将在所有设备上保持水平、居中、等距的优雅呈现，同时保持代码简洁与维护性。