bootstrap栅格必须严格遵循.container→.row→.col-三层嵌套结构，缺任一层则flex布局失效、列堆叠、断点不触发；.container须为.row直接父元素，.row须为.col-直接父元素。
必须先写对容器结构，否则栅格不生效
Bootstrap 栅格系统依赖严格的父级嵌套关系：.container（或 .container-fluid）→ .row → .col-*。漏掉任一层，比如直接把 .col-md-6 放在 下，或塞进 <nav></nav> 里却不包 .row，CSS 的 flex 布局就失效，列会堆成一竖排。
常见错误现象：.col- 类被浏览器忽略、元素宽度异常、响应式断点完全没反应。
-
.container必须是.row的**直接父元素**；.row必须是.col-*的**直接父元素** - 别在
.col-*里直接放另一个.col-*——中间必须加一层.row（嵌套时） - HTML5 文档类型不能少：
要放在第一行，前面不能有空格或注释
列宽怎么配才不会换行错乱
Bootstrap 3/4/5 都基于 12 等分设计，同一 .row 内所有 .col-* 的数字加起来**建议 ≤ 12**。超过 12 不报错，但会自动换行——比如 .col-md-8 + .col-md-8（16），第二列就会掉到下一行，视觉上变成两个满宽块。
典型使用场景：三栏等宽布局用 .col-md-4 ×3；左右两栏常用 .col-md-8 + .col-md-4；单栏全宽就用 .col-12（无断点前缀表示所有尺寸都生效）。
- 移动端优先，所以最小断点可不加前缀（如
.col-6），平板起再加.col-sm-6、桌面加.col-md-4 - 别混用旧版前缀（如
.col-xs-*）和新版（.col-sm-*），Bootstrap 5+ 已移除xs - 如果内容过长导致列内文字撑开、破坏等宽，给
.col-*加min-width: 0（或用class="d-flex"控制内部流）
五列、七列这种非12因数的布局怎么搞
Bootstrap 没有 .col-5 或 .col-md-7 这类类名——因为 5 和 7 都不是 12 的因数，硬写会被 CSS 忽略，退化为默认单列。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
真正能用的方案只有两个：
- 用
.row-cols-5（推荐）：作用于.row，让其子.col自动均分（每列 20%），支持响应式变体如.row-cols-md-5、.row-cols-sm-2 - 自定义类：写
.col-1-5 { flex: 0 0 20%; max-width: 20%; }，但要手动补全各断点媒体查询，并显式处理 gutter（padding）和box-sizing: border-box - 别用
width: 20%替代flex: 0 0 20%，否则在 Flex 容器中可能被压缩或溢出
嵌套时卡片高度不一致，怎么强制等高
单纯给外层 .row 加 d-flex 不够，它只拉伸直接子元素（即 .col-*），而每个 .col-* 内部的内容高度不同，会导致卡片“参差不齐”。
关键在每一列内部也要控制流：
- 给每个
.col-*里的卡片容器加class="d-flex flex-column h-100" - 卡片内的正文区域加
class="flex-grow-1"，让其占满剩余空间 - 底部按钮或标签区设固定高度（如
mb-2），避免拉伸干扰 - 别依赖
align-items-stretch——它不解决列内内容高度差异问题
嵌套本身不难，难的是每一层都守住「行→列→行→列」这个链路，以及每层都考虑内容高度的可控性。漏掉任意一个 .row 或任意一处 min-width: 0，都可能让整行布局在某个断点下突然崩掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
