bootstrap列表组提供结构化、样式统一的垂直项目列表，支持活动项、禁用项、扁平化、水平排列及徽章嵌入，具备开箱即用、无障碍友好等优点，但深度定制难、水平布局旧版支持弱、复杂嵌套易错位。

如果您希望在网页中以结构化、样式统一的方式展示一组相关项目，Bootstrap列表组（List Group）提供了一种简洁高效的实现方式。以下是关于其具体使用方法及优缺点的说明：

一、基本用法

Bootstrap列表组通过预定义的CSS类快速构建语义清晰、视觉一致的垂直项目列表，适用于导航菜单、通知项、用户列表等场景。其核心依赖于容器元素与列表项的特定类名组合。

1、使用

或

作为外层容器，并添加.list-group类。

2、为每个列表项（

1. ）添加.list-group-item类。

   3、确保引入了Bootstrap 5的CSS文件（如bootstrap.min.css），否则样式无法生效。

   二、设置活动项与禁用项

   通过添加状态类可直观标识当前选中项或不可交互项，提升用户操作反馈的明确性。

   1、为当前激活的列表项添加.active类，该元素将呈现高亮背景色与白色文字。

   2、为不可点击或不可用的列表项添加.disabled类，该元素将变为灰色并失去鼠标悬停效果与焦点响应。

   三、移除边框与圆角

   默认列表组带有外边框和圆角，若需嵌入卡片、模态框等容器内实现无缝衔接，可启用扁平化样式。

   1、在外层

   

   VPS Bootstrap

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

   下载
   或
   上同时添加.list-group和.list-group-flush类。

   2、此时所有列表项将取消左右边框、顶部/底部边框及圆角，仅保留上下间距分隔。

   四、水平排列列表项

   当需要将列表项横向排布（如工具栏、标签页导航），可借助栅格系统或内联类实现布局转向。

   1、为

   添加.list-group-horizontal类（Bootstrap 5.3+支持）。

   2、或配合栅格类：将每个

   • 包裹在
     中，并将

     置于
     内。

     五、添加徽章与自定义内容

     列表项支持嵌套任意HTML结构，便于附加状态标识、图标或交互控件。

     1、在.list-group-item内部插入新，实现右对齐徽章。

     2、可嵌入按钮、链接、小图标（如Bootstrap Icons）、甚至表单控件，但需注意内边距与垂直对齐。

     六、优点分析

     Bootstrap列表组具备开箱即用的样式一致性，无需额外编写CSS即可获得跨浏览器兼容的视觉表现；支持无障碍属性自动注入（如role="list"与role="listitem"）；所有状态类（active/disabled）均适配深色模式；组件轻量，仅依赖CSS，无JavaScript强制要求；与Bootstrap其他组件（如卡片、模态框）天然协同。

     七、缺点分析

     默认样式灵活性受限，深度定制需覆盖大量CSS变量或重写选择器；水平列表在旧版Bootstrap中缺乏原生支持，需手动处理换行与对齐；列表项内嵌复杂结构时，垂直居中与行高控制易出现偏差；不提供内置键盘导航逻辑（如方向键切换焦点），需开发者自行增强；徽章与图标未预设尺寸缩放规则，多层级嵌套时可能出现溢出或截断。