bootstrap 5栅格对直接加col-类无效，因为块级容器；应改用div布局或让作row并设为col-*；需配合text-truncate、text-wrap及响应式断点如col-12 col-sm-6 col-md-4，并用gap替代mb-2控制间距。

用 col- 类直接包裹 <li> 会失效

Bootstrap 5 的栅格系统只对直接子元素生效，而 <ul></ul> 默认是块级容器，<li> 在其中是普通流内元素，不参与栅格计算。强行给 <li> 加 col-6 没效果，浏览器会忽略。

正确做法是把列表内容“降级”为纯 <div> 布局，或用 <code>list-style: none 清除默认样式后套用栅格：

• 用 <div class="row"> 包住多个 <code><div class="col-6">，每个里面放文本项（适合无序/有序语义不强的场景） <li>保留 <code><ul></ul> 结构时，必须让 <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-* 做多列文本列表。


VPS Bootstrap
从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。
下载

更合理的断点组合：

• 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">，自动均分行高，比手动 <code>col-* 更稳

  用 gap 替代 mb-2 控制项间距

  以前习惯给每个 <li> 加 mb-2 来留空隙，但在多列栅格里会导致最后一行项下方多出空白（因为每项都带下边距）。栅格级间隙更干净：

  • 在父容器（<div class="row">）上加 <code>gap-3（对应 gap: 1rem），水平垂直间距同时生效
  • 只想要水平间隙？用 gx-3；只要垂直？用 gy-3（Bootstrap 5.2+）
  • 注意 gap 在 Flex 容器中兼容性好，但 IE11 不支持；若需兼容，退回 mx-n2 + px-2 组合模拟

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