Bootstrap的“流式布局”本质是栅格系统在响应式下的表现：.container-fluid设width:100%撑满视口，配合.row负margin与.col flex分配实现真正流动；.container则为断点固定宽度，不流式。
Bootstrap 的“流式布局”不是独立功能，而是其栅格系统在响应式场景下的自然表现——关键在于用对 .container-fluid 和 .row/.col 组合，而不是手动写 width: 100% 或 flex: 1。
为什么 .container 不是流式，而 .container-fluid 才是
.container 是固定宽度（如 1140px），只在特定断点居中；.container-fluid 才真正“流”起来：它始终是 width: 100%，撑满父容器（通常是 ）。如果你加了 padding 或 max-width 覆盖它，流式就断了。
- 必须把
.row直接放在.container-fluid内部，否则.row的负 margin 会溢出 -
.row默认有margin-left: -15px和margin-right: -15px，用来抵消子列的 padding，这个机制只在标准嵌套下生效 - 别在
.container-fluid外层再套 div 并设 width —— 那等于自己给流式加了闸门
.col 类名不带数字时的行为（比如 .col）
Bootstrap 4+ 中，.col（无后缀数字）表示“等分剩余空间”，本质是 flex: 1。它和 .col-12 完全不同：.col-12 是固定占满整行（12/12），而 .col 会根据兄弟元素动态分配宽度。
- 三个
.col并列 → 各占 1/3；两个.col+ 一个.col-4→ 前两者平分剩下 8 份，各得 4 份（即视觉上三等分） - 它不响应断点，所以想在小屏堆叠？得额外加
.col-12或.col-sm-12 - 如果内容超宽（如长文本、未约束的图片），
.col可能被撑开，破坏流式——此时要加overflow-wrap: break-word或max-width: 0
流式布局下高度不一致怎么办
流式 ≠ 等高。默认情况下，每列高度由自身内容决定，瀑布流效果就由此而来。但如果你需要卡片底部对齐（常见于商品列表），不能靠 height: 100% 硬拉——那会破坏响应性。
- Bootstrap 4+ 推荐用
.h-100+.d-flex.flex-column控制内部结构，再配合flex-grow: 1拉伸正文区域 - 避免对
.col直接设min-height，它会在小屏断点失效；应使用.min-vh-100或媒体查询辅助 - 真要瀑布流（非等高），别用 Bootstrap 栅格——它不是为这个设计的；改用 CSS
column-count或 Masonry JS 库
最容易被忽略的是：流式布局的“流”，依赖于容器宽度的连续变化。一旦你在某层加了 width: 375px 或 max-width: 500px，哪怕只是一行 CSS，整个流就卡在那个尺寸上了——它不会因为你缩放浏览器就自动变，得靠媒体查询或视口单位来解耦。
