Bootstrap 5栅格对<li>直接加col-类无效，因<ul>为块级容器；应改用div布局或让<ul>作row并设<li>为col-*；需配合text-truncate、text-wrap及响应式断点如col-12 col-sm-6 col-md-4，并用gap替代mb-2控制间距。
用 col- 类直接包裹 <li> 会失效
Bootstrap 5 的栅格系统只对直接子元素生效，而 <ul> 默认是块级容器，<li> 在其中是普通流内元素，不参与栅格计算。强行给 <li> 加 col-6 没效果，浏览器会忽略。
正确做法是把列表内容“降级”为纯 <div> 布局，或用 list-style: none 清除默认样式后套用栅格：
- 用
<div class="row">包住多个<div class="col-6">，每个里面放文本项（适合无序/有序语义不强的场景） - 保留
<ul>结构时，必须让<ul>成为row，再把<li>设为col-*并加float: none和width: auto—— 但 Bootstrap 5 已弃用float，更推荐第一种
text-wrap 和 text-truncate 配合多列更实用
多列下文本长度不一容易撑开列宽或换行错位，尤其中文标题+英文描述混排时。单纯靠 col-4 不够，得控制内容溢出行为：
-
text-truncate必须配合overflow: hidden+white-space: nowrap才生效，而 Bootstrap 5 的text-truncate已内置这两条，直接加在列内元素上即可 - 长段落用
text-wrap（Bootstrap 5.3+）保持换行，避免单字撑裂列宽；旧版本用word-wrap: break-word或overflow-wrap: break-word手动补 - 慎用
text-nowrap：它会让整行文本强制不换行，在小屏下直接溢出容器，看不到右侧内容
响应式断点选 col-md-4 而不是 col-4
全屏都固定 3 列（col-4）在手机上会挤成超窄竖条，文字缩到看不清。实际项目中几乎没人真用 col-* 做多列文本列表。
更合理的断点组合：
-
col-12 col-sm-6 col-md-4：手机单列、平板双列、桌面三列 -
col-12 col-lg-3：手机单列、大屏四列（适合卡片类文本项） - 如果列表项高度差异大，加
row-cols-2（Bootstrap 5.1+）配合<div class="row row-cols-2 row-cols-md-3">，自动均分行高，比手动col-*更稳
用 gap 替代 mb-2 控制项间距
以前习惯给每个 <li> 加 mb-2 来留空隙，但在多列栅格里会导致最后一行项下方多出空白（因为每项都带下边距）。栅格级间隙更干净：
- 在父容器（
<div class="row">）上加gap-3（对应gap: 1rem），水平垂直间距同时生效 - 只想要水平间隙？用
gx-3；只要垂直？用gy-3（Bootstrap 5.2+） - 注意
gap在 Flex 容器中兼容性好，但 IE11 不支持；若需兼容，退回mx-n2+px-2组合模拟
多列文本列表真正的难点不在“怎么分列”，而在“列宽动态变化时，文本截断、行高对齐、间隙一致性”这三处细节。漏掉任意一个，上线后都会在某个屏幕尺寸下显得毛躁。
