怎样使用Bootstrap 5实现多列文本列表排版？

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 组合模拟

多列文本列表真正的难点不在“怎么分列”，而在“列宽动态变化时，文本截断、行高对齐、间隙一致性”这三处细节。漏掉任意一个，上线后都会在某个屏幕尺寸下显得毛躁。