底部版权栏应优先使用 .container 以保持与正文视觉节奏一致；仅当需全宽背景时才用 .container-fluid 并配合 px-3 等内边距控制。

底部版权栏必须用 .container 还是 .container-fluid？

响应式底部版权栏的关键，是它和页面主体的视觉节奏要一致。如果正文用了 .container（固定宽度居中），底部却用 .container-fluid（100% 宽度），左右就会多出两道难看的“白边”或“溢出”，尤其在小屏上更明显。

• 大多数情况直接套用正文的容器类型：正文用 .container，底部也用 .container
• 确实需要铺满全宽（比如带背景色或渐变的底部），才用 .container-fluid，但得额外加 px-3 或 px-md-5 控制内边距，否则手机上看文字贴边
• Bootstrap 5 起默认启用 box-sizing: border-box，但如果你重置过全局样式，得手动确认 .container 内子元素没被意外撑开

col 布局在 footer 里为什么总错位？

里常见写法是 <div class="row"> <div class="col-md-6">© 2024</div> <div class="col-md-6 text-md-end">Privacy Policy</div> </div>，但一缩到手机就堆成两行、间距失控——根本原因是没处理好 col 的默认 flex-wrap 和 min-width。

• 手机端（xs）下 .col-md-6 不生效，实际退化为 display: block，但若父级 .row 没清浮动或没设 flex-direction: column，内容可能因 margin/padding 错位
• 更稳的做法：改用 .col-12 .col-md-6，明确声明 xs 下占满、md 起分栏
• 如果只是简单左右对齐（如左版权右链接），不用 col，直接 justify-content-between + flex 容器更轻量：<div class="d-flex flex-column flex-md-row justify-content-between"> <h3>如何让版权文字在小屏自动换行又不破坏对齐？</h3> <p>“© 2024 Company Name, Inc. All rights reserved.” 这种长文本在 320px 屏上强行不换行，会把整个 footer 撑宽、触发横向滚动——不是文字太长，是默认 <code>white-space: nowrap 在某些内联元素里偷偷生效。
  

  VPS Bootstrap

  从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

  下载
  • 给版权文字外层加 text-wrap: wrap（Bootstrap 5.3+）或降级用 word-wrap: break-word
  • 更推荐语义化写法：用 <p class="mb-0"></p> 包住文字，再配合 small 类缩小字号，避免用 font-size 硬调导致 line-height 失控
  • 如果右侧链接是 <a></a>，确保它没继承 white-space: nowrap；检查是否误加了 text-nowrap 工具类

  用 fixed-bottom 时为啥版权栏盖住了页面内容？

  fixed-bottom 确实能让 footer 钉在视口底端，但它脱离文档流，不会自动给上面的内容“腾位置”。

  • 最直接的补救：给 <main></main> 或主体容器加 pb-5（或具体像素值，如 pb-xxl-5），留出 footer 高度余量
  • 更健壮的方案：不用 fixed-bottom，改用 position: sticky + bottom: 0，前提是父容器有明确高度且内容可滚动；或者干脆放弃“永远在底”，用常规文档流 + mt-auto（配合 d-flex flex-column min-vh-100 在 body 上）

  字体大小、行高、链接颜色这些细节，容易在媒体查询里漏掉断点适配。比如 fs-sm 在 sm 断点生效，但 xs 下还是默认大小——得补上 fs-xs 或用 fs-7 这类绝对尺寸类。