应使用 col-12 col-md-4 组合类实现移动端1列、pc端3列；仅写 col-4 会导致所有尺寸下强制三列，而 col-12 在 xs 断点设满宽，col-md-4 在 ≥768px 覆盖为每列4份，利用断点覆盖逻辑达成响应式布局。
用 Bootstrap 的响应式栅格类控制列数
Bootstrap 本身不提供“移动端1列、PC端3列”的单一类名，必须组合使用断点前缀类。核心思路是：在最小断点（col-）设为12列（即100%宽度），再在中等及以上屏幕用 col-md-4 实现3列均分。
为什么不能只写 col-4？
col-4 是“始终显示为4列宽”，它会在所有屏幕尺寸下生效，包括手机——这会导致移动端也强行三列挤在一起，内容被压缩甚至溢出。真正要的是“小屏时退化为单列，大屏时升为三列”，必须依赖断点类的覆盖逻辑：
-
col-12：在xs（默认）断点设为满宽（1列） -
col-md-4：在md（≥768px）及以上断点覆盖为每列占4份（3列） - Bootstrap 的类名按断点顺序从左到右覆盖，
col-md-4会自动覆盖col-12在 ≥768px 下的行为
实际 HTML 写法和常见错误
正确结构如下（以 Bootstrap 5 为例）：
<div class="row"> <div class="col-12 col-md-4">内容1</div> <div class="col-12 col-md-4">内容2</div> <div class="col-12 col-md-4">内容3</div> </div>
容易踩的坑：
- 漏掉
col-12：只写col-md-4，则在手机上会继承默认的 auto 宽度，可能错乱或堆叠异常 - 用错断点：比如写
col-lg-4，那在平板（768–991px）上仍是单列，不符合“PC端”预期；md起始更稳妥 - 父容器没加
row：栅格系统依赖row的负外边距清除浮动，否则列可能换行错位
如果需要兼容 Bootstrap 4 或自定义断点
Bootstrap 4 写法完全一致，col-12 col-md-4 同样有效。若项目用了自定义 Sass 变量（如修改了 $grid-breakpoints），需确认 md 对应的实际像素值是否仍符合你定义的“PC端”范围。此时建议直接查编译后的 CSS，搜索 @media (min-width: ...) 看 col-md-* 的生效条件。
真正的难点不在写法，而在于理解“断点类是叠加覆盖，不是互斥开关”——很多人卡在以为写了 col-md-4 就自动关掉了小屏样式，其实小屏样式必须显式声明才能被覆盖。
