如何设置 Bootstrap 列表组的间距和样式，是很多前端开发者在使用该框架过程中经常遇到的问题。Bootstrap 的列表组（List
Group）组件虽然开箱即用、结构清晰，但在实际项目中，我们常常需要对其外观进行自定义，以更贴合设计需求。无论是调整列表项之间的间距，还是修改字体、边框或颜色样式，掌握这些技巧都能让你的界面更具表现力。
调整列表组项之间的间距
默认情况下，Bootstrap 的列表组项是紧密排列的，没有间隔。如果你希望每一项之间留有一定的间距，可以通过自定义 CSS 或使用 Bootstrap
提供的工具类来实现。例如，使用 mb-2 类为每项增加底部间距：
html
复制编辑
<ul class="list-group">
<li class="list-group-item mb-2">Item 1</li>
<li class="list-group-item mb-2">Item 2</li>
<li class="list-group-item">Item 3</li>
</ul>如果你希望统一设置所有项的间距，可以在 ul 外包裹一个 div，并为每个列表项设置自定义类，或者用 CSS 定义统一的样式：
css
复制编辑
.custom-list-group .list-group-item {
margin-bottom: 10px;
}然后在 HTML 中应用这个类：
html
复制编辑
<ul class="list-group custom-list-group">
<li class="list-group-item">Item 1</li>
<li class="list-group-item">Item 2</li>
</ul>自定义列表组样式
除了间距，Bootstrap 也支持通过实用类（Utility Classes）和自定义 CSS
更灵活地控制样式。你可以轻松改变背景颜色、文字样式、边框等属性。
改变背景和文字颜色：
html
复制编辑
<li class="list-group-item bg-primary text-white">带背景的列表项</li>去除边框并添加阴影效果：
html
复制编辑
<li class="list-group-item border-0 shadow-sm">无边框带阴影</li>设置圆角样式，可以使用 Bootstrap 的 rounded 类，或自定义具体的圆角尺寸：
html
复制编辑
<li class="list-group-item rounded-3">圆角列表项</li>水平列表样式与响应式调整
如果你希望列表项在横向展示，可以使用 list-group-horizontal 类：
html
复制编辑
<ul class="list-group list-group-horizontal">
<li class="list-group-item">水平项 1</li>
<li class="list-group-item">水平项 2</li>
</ul>还可以使用响应式变体，如 list-group-horizontal- md，使列表在特定屏幕宽度下横向排列，其他情况下保持垂直排列。这在构建响应式界面时非常实用。
使用按钮或链接样式增强交互性
Bootstrap 的列表组也可以和按钮、链接样式结合使用，让列表项具有点击交互效果。例如：
html
复制编辑
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active">
活跃的链接项
</a>
<a href="#" class="list-group-item list-group-item-action">普通链接项</a>
</div>通过 .list-group-item-action 类，鼠标悬停时会自动添加 hover 效果，使界面更具交互性。
通过合理使用 Bootstrap 的工具类以及适当的自定义样式，我们可以非常灵活地调整列表组的间距和样式，无需重写复杂的
CSS。无论是微调间距、控制对齐，还是实现交互式列表，Bootstrap 都提供了足够的扩展空间，助你快速构建高质量的前端页面。
