bootstrap未预设.footer类，仅提供栅格（如.container+.row+.col-*）和工具类（如.bg-dark）组合实现响应式页脚，需手动构建结构而非调用组件。
Bootstrap 页脚本身不提供独立的 footer 组件类，所谓“响应式页脚”是靠栅格系统 + 工具类 + 媒体查询组合实现的，不是调用一个函数就能生成。
为什么直接加 class="footer" 没反应
Bootstrap 没有预设 .footer 这个 CSS 类（v3/v4/v5 均无）。你看到的“Bootstrap 页脚”通常是开发者自己写的 HTML 结构，再套用 .container、.row、.col-* 等栅格类来实现布局。如果只写 <footer class="footer"></footer> 而没定义样式，它就只是个普通块级元素，不会自动响应式。
- Bootstrap v5 中唯一接近的内置类是
.bg-dark、.text-white、.py-5这类工具类，用于快速配色和间距，但不解决结构响应逻辑 - 官方文档里所有页脚示例都依赖
.container或.container-fluid+.row+ 响应式列类（如.col-md-4） - 别指望
footer标签自带 Bootstrap 行为——它只是语义化标签，样式全靠你手动组合
用栅格系统做三栏响应式页脚（v5 推荐写法）
最常用也最可控的方式：把页脚当一行网格来布，利用断点类控制列数变化。例如在桌面端三栏、平板端两栏、手机端单栏：
<footer class="bg-dark text-white py-5"><div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 mb-4">
<h5>关于我们</h5>
<p>公司简介...</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/gongju/2501" title="Bootstrap"><img
src="https://img.php.cn/upload/manual/001/431/639/6a6713f6cfa4e217.png" alt="Bootstrap" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/gongju/2501" title="Bootstrap" class="overflowclass">Bootstrap</a>
<p class="overflowclass">Bootstrap 5.3.8 编译版包含可直接用于项目的 CSS、JavaScript 和插件文件，适合快速搭建响应式网页。</p>
</div>
<a rel="nofollow" href="/xiazai/gongju/2501" title="Bootstrap" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 mb-4">
<h5>快速链接</h5>
<ul class="list-unstyled">
<li><a href="#" class="text-white">首页</a></li>
</ul>
</div>
<div class="col-md-4">
<h5>联系我们</h5>
<p>邮箱：xxx@example.com</p>
</div>
</div>
</div>
</footer>
-
.col-md-4表示 ≥768px 时每栏占 4 列（共 12 列，刚好三栏） -
.col-sm-6表示 ≥576px 时每栏占 6 列（两栏），小屏自动堆叠成一列 -
.mb-4在小屏下加垂直间距，避免文字挤在一起 - 不要用
.container-fluid包页脚——它会让内容撑满全宽，破坏视觉节奏；多数项目用.container更稳妥
固定到底部（sticky footer）容易踩的坑
所谓“始终贴底”的页脚，不是靠 position: fixed，而是用 Flexbox 布局让 <main></main> 占满剩余高度。Bootstrap v5 默认支持，但需结构配合：
- 父容器必须设
display: flex; flex-direction: column;，Bootstrap 提供.d-flex和.flex-column -
<main></main>需加.flex-fill（v5）或.flex-grow-1（v4），否则页脚会浮在内容下方 - 常见错误：忘了给
html和body设height: 100%，导致 flex 不生效 - 如果页面内容很短，又用了
position: fixed，滚动时页脚会遮挡底部内容——这不是响应式，是 bug
响应式页脚的代价：体积与定制冲突
Bootstrap 的栅格和工具类确实让页脚“看起来很快能做出来”，但真实项目中常被忽略的点是：
- 引入整套 Bootstrap CSS（哪怕只用几个类），页脚部分也会加载
grid、spacing、typography等无关模块，gzip 后仍超 20KB - 一旦设计要求“非标准断点”（比如在 850px 才切两栏），你就得手写媒体查询覆盖
.col-md-*，等于绕开框架 - 深色背景页脚搭配浅色文字，
.text-white在高对比度模式下可能不达标，WCAG 2.1 AA 要求对比度 ≥4.5:1，得额外检查 - 如果 CMS 输出的页脚内容长度不可控（比如用户填了超长地址），
.col会换行错乱——这时得加word-break: break-word或限制行数
真正难的不是“怎么让页脚响应”，而是“怎么让它在内容动态、设备多样、无障碍要求明确的前提下，依然稳定不破型”。这往往需要脱离栅格，用 display: grid 或 flex-wrap: wrap + min-width 控制，而不是依赖 Bootstrap 那套预设断点。
