col-md-6 是让列在中屏及以上占50%宽度的正确写法，它仅在≥768px生效，需嵌套于row中且同级列数总和≤12；直接写col-6会导致所有屏幕强制占半宽，引发手机端布局混乱。
col-md-6 是让列在中屏及以上占50%宽度的正确写法
Bootstrap 5 的栅格系统里，col-{breakpoint}-6 表示该列从指定断点起占据 6/12 = 50% 宽度。比如 col-md-6 就是在 ≥768px（md 断点）及更大屏幕下占半宽；它不会影响更小屏幕，除非你额外声明其他类。
常见错误是直接写 col-6——这会让列在所有尺寸下都强制占 50%，包括手机竖屏，结果就是两列挤在一起、文字换行混乱、甚至触发横向滚动条。
-
col-sm-6：≥576px 起生效（适合平板横屏或大手机） -
col-md-6：≥768px 起生效（最常用，覆盖主流平板和桌面） -
col-lg-6：≥992px 起生效（仅大屏及以上）
为什么写了 col-md-6 却没看到 50% 效果？检查这三处
不是类名写错了，而是上下文没配对：
- 父容器漏了
row：col-md-6必须嵌套在<div class="row">内，否则 flex 布局不启动，padding 和负 margin 都不生效 - 同级列总和不等于 12：比如两个
col-md-6是 OK 的（6+6=12），但一个col-md-6加一个col-md-8就会溢出（6+8=14），导致第二列换行或撑破容器 - 自定义 CSS 干扰：比如写了
width: 30%或flex: 0 0 30%，会直接覆盖 Bootstrap 的flex: 0 0 50%
想“只在 md 断点恰好 50%”，其他断点保持不同宽度？靠覆盖逻辑
Bootstrap 没有 col-md-only-6 这种类，但可以用“先设小屏，再覆盖中屏，最后重置大屏”的方式模拟：
- 小屏堆叠（各占 100%）：
col-12 - 中屏并排（各占 50%）：
col-md-6 - 大屏恢复三等分（各占 ~33.3%）：
col-lg-4
完整写法：<div class="col-12 col-md-6 col-lg-4">。注意顺序不能颠倒——col-lg-4 必须写在最后，否则会被前面的类覆盖。
w-md-50 和 col-md-6 的本质区别在哪
w-md-50 是纯宽度工具类，只设 width: 50%，不处理 padding、margin、flex 基础行为；col-md-6 是栅格系统的一部分，自带 flex: 0 0 50%、左右 padding 补偿、以及与 row 的负 margin 配合。
所以：
- 用
w-md-50的元素必须确保父容器有明确宽度（比如container），否则 50% 无意义 - 用
col-md-6的元素必须在row内，否则 padding 会多出 30px 空隙，视觉上比预期窄 - 混用两者（如
col-md-6 w-md-50）会导致冲突，最终以哪个生效取决于 CSS 优先级，不推荐
真正容易被忽略的是：col 类的宽度计算依赖于整行内所有同级 col 的数字总和是否为 12；而 w-* 类完全不管这个，它只管自己。
