Bootstrap 5 中用 col-4 实现三列等分最直接：col-4 表示每列占 4/12 宽度，三列总和为 12，在所有断点（xs 及以上）下天然等宽；若需小屏堆叠、大屏等分，则改用 col-md-4。
Bootstrap 5 里用 col-4 实现三列等分最直接
Bootstrap 5 默认采用 flex 布局，12 列栅格系统下，三等分就是每列占 4 列宽度。col-4 表示在所有断点（xs 及以上）都固定为 4 列宽，天然满足等宽需求。
常见错误是误用 col-3（那是四等分）或混用响应式类如 col-md-4 col-lg-3 导致列宽不一致。只要不需要响应式变化，col-4 就够用。
<div class="row"> <div class="col-4">左</div> <div class="col-4">中</div> <div class="col-4">右</div> </div>
想让三列在小屏堆叠、大屏才等分？用 col-md-4
如果希望在手机上垂直堆叠（单列），到平板或桌面才展开为三列等宽，就该用带断点的类。col-md-4 表示从 md（768px）起生效，xs 和 sm 下默认为 100% 宽度。
-
col-sm-4：从 576px 开始三等分，但部分安卓小屏可能挤不下，内容易换行 -
col-lg-4：要到 992px 才触发，md下仍是单列，适合内容较重的卡片 - 别写成
col-4 col-md-4—— 后者冗余，col-md-4已隐含对更大断点的继承
为什么不用 col-3 或 col-6 拼三列？
有人试图用 col-3 + 空列或 col-6 嵌套来“凑”三列，这会引入额外 DOM、破坏语义，且容易因 gutter（列间距）导致总宽度超 100%。
Bootstrap 的 gutter 默认是水平方向加在 .col 上的 padding，三列 col-4 加起来刚好 12 列，padding 由 .row 的负 margin 抵消，布局稳定。
若手动覆盖 gutter（如设 g-0），也要同步确认是否真需要——去掉间距后列之间紧贴，可能影响可读性。
Flex 自定义方式：当标准栅格不够用时
如果三列内容高度差异大，又希望底边对齐（比如卡片底部按钮对齐），仅靠 col-4 不够。这时得借助 Bootstrap 的工具类补足：
- 给
.row加align-items-stretch（默认行为，通常不用显式写） - 给
.row加h-100配合子项h-100，确保高度拉满 - 避免在
.col内用float或旧式display: inline-block，会和 flex 冲突
纯 CSS 方案（如 display: grid）虽灵活，但在已引入 Bootstrap 的项目里，优先用它内置的类，减少样式冲突风险。
真正容易被忽略的是 gutter 对齐效果和响应式断点的实际触发宽度——拿设备调试器量一下 md 断点是否真在你需要的尺寸切换，比背文档更可靠。
