本文详解如何修复 bootstrap 页脚在小于 576px 视口下从并排双列错误坍缩为垂直堆叠的问题，通过语义化类名、移除冗余断点依赖及合理使用 flex 布局实现响应式稳定显示。
本文详解如何修复 bootstrap 页脚在小于 576px 视口下从并排双列错误坍缩为垂直堆叠的问题，通过语义化类名、移除冗余断点依赖及合理使用 flex 布局实现响应式稳定显示。
Bootstrap 的 col-sm-6 类仅在 ≥576px（即 sm 断点及以上）才启用栅格行为；当视口宽度低于该阈值时，该类失效，元素默认退化为 display: block，导致两个 <span></span> 垂直堆叠——这正是问题根源。
要确保小屏下仍保持横向并列，需放弃对 .col-sm-* 的依赖，改用更底层、全断点生效的 Flex 布局控制：
✅ 正确做法：使用 col + d-flex 系统性控制
<footer class="container-fluid p-2"><div class="row">
<span class="footer-top-left col d-flex justify-content-center">
<ul class="list-unstyled mb-0 text-start">
<li>Duluth Location:</li>
<li>6920 Grand Ave, Duluth, MN 55807</li>
<li>(218) 606-1150</li>
<li><a href="mailto:info@duluthautorepair.com">[email protected]</a></li>
</ul></span>
<span class="footer-top-right col d-flex justify-content-center">
<ul class="list-unstyled mb-0 text-start">
<li>Superior Location:</li>
<li>4003 E 2ND ST, SUPERIOR, WI 54880</li>
<li>(715) 919-1384</li>
<li><a href="mailto:info@superiorautorepair.com">[email protected]</a></li>
</ul></span>
</div>
<p class="footer-bottom mt-3 ms-3 mb-0">
© Copyright 2024 Perfect Timing Auto Repair. All Rights Reserved.
</p>
</footer>
? 关键 CSS 调整（精简且可靠）
/* 移除所有针对 .col-sm-6 的强选择器，避免覆盖 Bootstrap 默认行为 */
footer {
background-color: #20252b;
color: #aaa;
width: 100%;
}
/* 小屏下强制双列等宽并列（Flex 核心） */
@media (max-width: 575.98px) {
.footer-top-left,
.footer-top-right {
flex: 1; /* 等分剩余空间 */
max-width: 100%;
}
.footer-top-left ul,
.footer-top-right ul {
margin: 0;
padding: 0;
}
.footer-bottom {
font-size: 0.75rem; /* 避免过小（0.4rem 易致可读性差） */
margin-top: 1rem;
}
}
/* 大屏优化（可选） */
@media (min-width: 801px) {
footer {
position: absolute;
bottom: 0;
}
}
⚠️ 注意事项与最佳实践
-
不要混用
col-sm-6和手动flex：.col-sm-6在小屏无样式，而display: flex若未在媒体查询中显式声明，可能被父级.row的flex-wrap: wrap干扰； -
优先使用
col（无断点前缀）：它在所有尺寸下均为flex: 1 0 0%，天然支持等宽自适应； -
添加
d-flex和justify-content-center到子元素：确保内容居中，同时避免因text-align: center导致列表项错位； -
重置
ul样式：使用list-unstyled+mb-0防止默认外边距破坏布局； -
字体大小建议 ≥0.75rem：
0.4rem（约 6px）在移动设备上难以阅读，违反 WCAG 可访问性标准。
通过以上调整，页脚在任意视口宽度下均能稳定维持双列结构，兼顾语义清晰性、响应式鲁棒性与可维护性。
