应使用语义化 标签而非 .footer 类，因 Bootstrap 官方未预设该类；需搭配 text-center 居中版权文字，用 bg-dark text-white 解决深色背景文字不可见问题，流式布局优先，避免滥用 sticky-bottom。
版权栏该用 .footer 还是自定义 footer 标签？
Bootstrap 官方不提供名为 .footer 的预设类，也不推荐直接套用 .footer 类名——它不是 Bootstrap 5 的标准 CSS 类。真正可靠的做法是用语义化 HTML 标签 footer，再配合 Bootstrap 的间距、排版和背景工具类来控制样式。
-
footer是 HTML5 原生语义标签，对 SEO 和可访问性更友好 - Bootstrap 5 默认对
footer没有特殊重置，但会继承全局字体、颜色等基础样式 - 若误写成
<div class="footer">，反而可能因未定义样式导致布局塌陷或颜色异常 <p>推荐结构：<pre class="brush:php;toolbar:false;"><footer class="bg-dark text-white py-4"> <div class="container"> <p class="mb-0">&copy; 2024 MySite. All rights reserved.</p> </div> </footer></pre></p> <h3>怎么让版权文字居中且适配移动端？</h3> <p>默认 <code>p或div在footer中会左对齐，需主动控制；移动端小屏下若用固定宽度或浮动，容易错位。- 使用
text-center类实现居中，它在所有断点都生效，无需额外媒体查询 - 避免用
float或position: absolute，会破坏 Flex 布局兼容性 - 如果内容含多行（如版权 + 友情链接），改用
text-center+d-flex flex-column align-items-center更稳妥
简洁单行示例：
<footer class="bg-light py-3"> <div class="container"> <p class="text-center mb-0 text-muted">© 2024 MySite. Powered by Bootstrap.</p> </div> </footer>为什么加了
bg-dark文字却看不见？这是最常踩的坑：Bootstrap 5 的
bg-dark会把背景设为深色（#343a40），但默认文字颜色仍是深灰（#212529），对比度不足导致“文字消失”。- 必须搭配文字颜色类，如
text-white、text-light或text-body-secondary -
text-white最保险，适用于bg-dark和bg-black - 若用
bg-primary，则建议配text-white而非text-light（后者在浅蓝背景下可能发灰）
错误写法：
<footer class="bg-dark"><p>© 2024</p></footer>
正确写法：<footer class="bg-dark text-white"><p class="mb-0">© 2024</p></footer>要不要加
sticky-bottom让版权栏始终贴底？sticky-bottom是 Bootstrap 5 提供的实用类，但它不是“永远固定在视口底部”，而是“在父容器滚动到底部时才吸附”，实际效果常不如预期。- 它依赖父元素有明确高度且内容不足以撑满视口，否则根本不会触发 sticky 行为
- 真正需要“始终可见”的底部栏（如 APP 底部导航），应使用
fixed-bottom - 版权栏绝大多数场景应随内容自然流式布局，用
mt-auto配合 Flex 容器推到底部更可靠（例如在html>body>main+footer结构中）
简单流式版权栏不需要任何定位类；只有当页面内容过短、想避免版权栏悬在半空时，才考虑在
main外层加d-flex flex-column min-vh-100，再给main加flex-grow-1，最后让footer自然落底。 - 使用
