Bootstrap栅格失效主因是结构错误：必须严格遵循.container→.row→.col-*三层嵌套，缺一层则flex失效、列垂直堆叠；且需DOCTYPE声明、viewport标签及正确断点类名。
Bootstrap栅格系统不生效，八成是结构写错了——不是类名没加对，而是嵌套层级断了。
必须严格遵循 .container → .row → .col-* 三层结构
漏掉任一层，比如把 .col-md-6 直接塞进 <nav></nav> 或 ，CSS 的 flex 布局就失效，列会垂直堆叠、断点完全不响应。
-
.container（或.container-fluid）必须是.row的**直接父元素** -
.row必须是所有.col-*的**直接父元素**；不能在.col-*里再放一个.col-*，中间必须补一层.row - HTML5 文档类型不能少：
<!DOCTYPE html>必须在第一行，前面不能有空格或注释
.col-* 类名前缀和断点怎么选才不冲突
Bootstrap 5+ 已移除 .col-xs-*，最小断点直接用无前缀的 .col-*（即 <576px），混用旧版前缀会导致样式被忽略。
- 移动端优先：内容简单时用
.col-12（小屏单列），再逐步叠加.col-sm-6（≥576px 两列）、.col-md-4（≥768px 三列）、.col-xl-3（≥1200px 四列） - 同一
.row内所有.col-*的数字加起来建议 ≤12；超过 12 不报错，但第二组列会自动换行，视觉上变成满宽块 - 五列、七列等非 12 因数布局，别硬写
.col-5（无效），改用.row-cols-5（作用于.row，让子.col自动均分）
卡片等高和间距容易被忽略的细节
只给 .row 加 d-flex 没用——它只拉伸直接子元素（即 .col-*），而每个列内卡片高度不同，仍会参差不齐。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 每张卡片容器要加
class="d-flex flex-column h-100"，正文区域加flex-grow-1占满剩余空间 - 删掉自定义
display: flex和flex-basis，它们会和 Bootstrap 内置的 margin/padding 规则冲突，导致错位或溢出 - 用间距工具类代替手写 margin：
m-1（小屏外边距 0.25rem）、m-md-2（中屏起 0.5rem），比margin-bottom: 1rem更可控
viewport 元标签不是可选项
没加这行，所有断点类（.col-sm-*、.col-md-*）在手机上全失效，页面会被缩放成桌面视图。
- 必须在
<head>中声明：<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> - 这个标签必须在所有 CSS 和 JS 引入之前，且不能被条件注释或服务端逻辑包裹
最常被跳过的其实是嵌套深度和 viewport —— 写对结构后，响应式基本就稳了；其余都是微调。
