本文详解如何通过优化 bootstrap 网格类与 css 媒体查询，确保页脚在 ≤575px 视口下仍维持左右两栏并排显示，避免默认的垂直堆叠行为。
本文详解如何通过优化 bootstrap 网格类与 css 媒体查询，确保页脚在 ≤575px 视口下仍维持左右两栏并排显示，避免默认的垂直堆叠行为。
在响应式网页开发中，页脚（footer）常因未合理配置响应式断点而出现布局错乱——尤其在小屏幕（如手机）下，本应并排显示的左右两栏内容意外垂直堆叠，破坏信息结构与视觉平衡。问题根源在于：原代码中使用了 col-sm-6（即“≥576px 时占半宽”），但在 时该类失效，Bootstrap 回退为 <code>col-12（整行宽度），导致两个 <span></span> 元素各自独占一行。
✅ 正确解法：强制小屏下仍保持等宽分栏
关键在于移除对 sm 断点的依赖，改用 col（即 col-xxs，等效于 flex: 0 0 50% + max-width: 50%）并配合 d-flex 容器控制。同时精简 HTML 结构，避免嵌套冗余的 container-fluid row justify-content-center 干扰 Flex 流向。
以下是推荐的重构方案：
<footer class="bg-dark text-light py-3"><div class="container-fluid px-4">
<div class="row g-4">
<div class="col">
<h6 class="mb-2">Duluth Location</h6>
<ul class="list-unstyled mb-0">
<li>6920 Grand Ave, Duluth, MN 55807</li>
<li>(218) 606-1150</li>
<li><a href="mailto:info@duluth.com" class="text-muted">info@duluth.com</a></li>
</ul>
</div>
<div class="col">
<h6 class="mb-2">Superior Location</h6>
<ul class="list-unstyled mb-0">
<li>4003 E 2ND ST, SUPERIOR, WI 54880</li>
<li>(715) 919-1384</li>
<li><a href="mailto:info@superior.com" class="text-muted">info@superior.com</a></li>
</ul>
</div>
</div>
<p class="footer-bottom mt-4 mb-0 text-center text-muted small">
© Copyright 2024 Perfect Timing Auto Repair. All Rights Reserved.
</p>
</div>
</footer>
? 核心 CSS 补充（可选，增强小屏一致性）
若需进一步微调超小屏（如 iPhone SE）字体与间距，可添加精准媒体查询：
/* 超小屏适配（≤425px） */
@media (max-width: 425px) {
footer .col h6,
footer .col li {
font-size: 0.75rem;
}
footer .row {
flex-direction: column; /* 可选：极窄屏转为上下结构，但非必须 */
}
footer .col {
width: 100%; /* 强制单列，此时语义更清晰 */
}
}
⚠️ 重要注意事项：
- 避免在页脚内混用
justify-content-center与col-*—— 居中会压缩列宽，破坏等分布局； - 不要给
.footer-top-left/.footer-top-right设置display: flex（除非内部需对齐子元素），否则可能干扰 Bootstrap 的栅格计算； -
container-fluid已含width: 100%和padding，无需额外width: 100%或flex: 1； - 版权行（
.footer-bottom）建议独立于row，避免被栅格系统影响，用mt-4+text-center保证居中。
✅ 总结
保持页脚双列的关键不是“阻止堆叠”，而是主动定义小屏下的列行为：用无断点的 .col 替代 .col-sm-6，借助 Bootstrap 5+ 的默认等分逻辑；配合语义化 <div> 替代 <code><span></span>（因 <span></span> 默认为 inline，不利于栅格渲染）；最后通过轻量媒体查询做字体与间距微调。如此即可实现全视口下稳定、可维护、符合无障碍标准的页脚布局。
