栅格列宽由容器实时宽度除以12再乘以col-*数值动态计算，如960px容器中col-3为240px；gutter从列宽中扣除，非额外添加；Flex与Grid栅格不可混用于同一容器。
栅格列宽怎么算出来的？不是写死的12列
响应式栅格的“12列”只是默认划分方式，实际每列宽度由容器总宽除以12再乘以col-*的数值决定。比如容器宽960px，col-3就是 960 ÷ 12 × 3 = 240px；换成1140px容器，同一col-3就变成285px——本质是比例制，不是像素制。
关键点在于：所有列宽计算都基于当前容器（通常是.container或.row父元素）的实时宽度，不是视口宽度，也不是设计稿基准宽度。
- 改容器宽度（比如加
max-width: 1400px），所有col-*的绝对宽度会同步缩放 -
col-12永远占满整行，但具体多少像素，得看它爹多宽 - 媒体查询只控制“哪套列数生效”，不改变单列计算逻辑
为什么在小屏幕上col-md-6没生效？
因为col-md-6只在min-width: 768px（Bootstrap默认）及以上才激活；低于这个值，它等价于col-12（即全宽）。这不是bug，是断点优先级规则：更小断点的类会覆盖更大断点的类。
常见错误现象：col-sm-6 col-md-4在平板上显示为两列（col-sm-6生效），但在手机上却变成单列——其实是col-sm-6被忽略，退回到无类定义状态，默认col-12。
立即学习“前端免费学习笔记（深入）”；
- 必须显式写
col-*才能控制最小断点（如col-6表示所有尺寸都两列） -
col-lg-3不会影响手机，除非你同时写了col-12或没写任何col-类 - 断点类之间不叠加，只取当前匹配的**最高优先级有效类**
gutter到底减谁的宽度？
栅格间距（gutter）不是加在列外边，而是从列宽里“抠”出来的。比如12列总宽100%，设gutter: 1rem，系统会先预留出所有列间间隙（11个间隙），再把剩余宽度按比例分给各列。所以col-6实际拿到的不是50%，而是略小于50%。
这导致两个易踩坑点：一是用width: 50%手动覆盖列宽时，会和gutter错位；二是嵌套.row时，子row的gutter会再次参与计算，可能让内层列宽严重缩水。
- Bootstrap 5+ 默认用
padding实现gutter，靠margin: -1rem抵消父容器影响 - 如果禁用gutter（
gx-0），列宽立刻回归精确比例，但相邻列会紧贴 - 自定义gutter值时，注意单位一致性：用
rem比px更利于缩放适配
Flexbox栅格和CSS Grid栅格能混用吗？
能，但别在同一个.row里混。Flexbox栅格（如Bootstrap）依赖display: flex + flex: 0 0 auto + 百分比max-width；CSS Grid栅格（如grid-template-columns: repeat(12, 1fr)）走的是网格轨道分配逻辑。两者对gap、align-items、子元素width的处理完全不同。
典型翻车场景：把col-6元素直接丢进display: grid容器，结果它无视col-6，按Grid自动分配轨道；或者反过来，在Flex row里给子元素写grid-column: span 3，根本不起作用。
- 混合使用只建议分层：外层用Grid做大布局（header/main/footer），内层用Flex栅格做内容排版
- 不要试图用
col-*类去约束Grid子项，它们根本不读这些类 - 真要动态列数，优先用
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))))，比维护12列语义更可靠
最常被忽略的是：栅格系统从来不管内容高度。列高不一致时，Flex布局会拉伸对齐，Grid默认不拉伸，而float旧方案直接塌陷——选哪种，取决于你要不要“行内等高”这个副作用。
