bootstrap 4 默认在小屏幕下将 `.col-*` 类元素转为垂直堆叠，导致页脚中并排的社交图标被强制换行；通过为图标容器添加 `display: flex` 并配合合理间距控制，即可实现移动端水平居中对齐。
在使用 Bootstrap 4 构建响应式网站时，页脚（footer）中的社交媒体图标常因栅格系统在移动断点（如 排列——这并非代码错误，而是 Bootstrap 的设计逻辑：.col-md-* 类仅在中等及以上屏幕（≥992px）生效，而在移动端实际退化为 width: 100% 的块级元素，其内部 标签也失去内联流式布局能力，从而逐行堆叠。
根本解决方案是脱离栅格依赖，改用 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="#">@@##@@</a> <a href="#">@@##@@</a> <a href="#">@@##@@</a> </div>
✅ 关键优化说明：
- 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 重构，您的页脚社交图标将在所有设备上保持水平、居中、等距的优雅呈现，同时保持代码简洁与维护性。
