页脚应使用container-fluid或直接row，避免嵌套container导致响应失效；列类须按col-12 col-sm-6 col-lg-3顺序书写，否则断点不生效。
页脚别套 container，直接用 container-fluid 或 row 开干
很多人一上来就把 footer 包进 container，结果小屏下栏宽不缩、文字挤成一团——这不是 bug，是结构错了。bootstrap 的栅格断点（sm:576px、md:768px、lg:992px）只对直接子元素生效，嵌套一层 container 会切断响应链。
正确做法只有两种：
- 用
container-fluid作页脚最外层：它自带左右padding，撑满视口，且所有断点都有效 - 不用容器，直接
：更轻量，但得手动加px-0清除默认内边距（否则小屏两侧留白）
别给 footer 设 width、max-width 或 margin: auto，这些会覆盖栅格计算逻辑。
列类顺序必须从“小”到“大”，否则断点失效
想实现「手机单栏 → 平板双栏 → 桌面四栏」，类名顺序写反了就全乱套。Bootstrap 是从左往右匹配，遇到第一个满足的断点就停。
安全写法是：
-
col-12 col-sm-6 col-lg-3：小屏（ - 别写
col-lg-3 col-sm-6 col-12：浏览器先匹配col-lg-3，后面两个直接被忽略 - 如果栏目内容偏长（比如地址、长链接），单独给那栏加
text-wrap，否则小屏会溢出容器
每栏内部用 flex-column + gap-2，别靠 margin-bottom 堆间距
多栏页脚崩得最凶的，往往是各栏高度不一致——左边导航短，右边表单高，小屏堆叠后出现大片空白。这时光靠 col 不够，得控制栏内流。
每栏（即每个 col-* 内部的 div）该这么写：
- 加
class="d-flex flex-column gap-2"：统一垂直排列+间距，比一堆mb-2更可靠 - 表单控件（
input、button）加w-100：防止小屏下宽度失控 - 链接列表保留
ul结构，只加ps-0 mb-0和fw-normal：删掉默认左 padding，禁用粗体，避免继承导航样式 - 版权行必须脱离
row，单独放到底部：用© 2026
图标和文字混排时，别用 float 或绝对定位
页脚里塞 Font Awesome 图标 + 文字，最容易错位。常见错误是给图标加 float: left 或 position: absolute，结果小屏下图标飞出去、文字换行错乱。
稳妥做法：
- 图标统一用
text-center fs-5控制尺寸和居中 - 图标 + 文字放在同一行内，用
d-inline-flex align-items-center gap-1 - 如果某栏含社交链接，整栏加
text-center，图标用fs-4，文字用small类，视觉节奏才一致
真正容易被忽略的，是各栏内元素高度差异带来的“空洞感”——不是 CSS 没生效，而是你没意识到：小屏堆叠后，原本对齐的底部突然暴露了内容长短差。删掉多余 div，比写 JS 补高度管用得多。
