Bootstrap v5.1.1与v4.0.0间距差异及还原v4布局方案咨询

问题原因 #

你遇到的两个布局差异都是Bootstrap5默认样式调整导致的：

1. 导航栏额外左右间距：Bootstrap5为.navbar新增了默认左右内边距--bs-navbar-padding-x: 1rem，而Bootstrap4的.navbar默认左右内边距为0，因此出现边缘额外间距。
2. list-group尺寸更大：Bootstrap5将.list-group-item的默认上下内边距从v4的0.75rem上调到了1rem，因此单个列表项高度更高、整体更宽松。

解决方案 #

只需在你现有的自定义CSS中添加对应覆盖规则即可还原Bootstrap4的布局效果：

/* 1. 清除导航栏默认左右内边距 */
.navbar {
  padding-left: 0;
  padding-right: 0;
}

/* 2. 还原list-group-item的上下内边距为v4版本数值 */
.list-group-item {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

如果不想修改CSS，也可以直接在HTML元素上加Bootstrap工具类实现等价效果：

• 给<nav>标签加px-0类清除左右内边距
• 给<div class="list-group">标签加list-group-sm类缩小列表项尺寸

额外注意 #

你提供的Bootstrap v4测试代码中错误引入了Bootstrap5的JS文件，建议替换为v4对应的JS资源，避免导航栏折叠等交互功能出现异常：

<!-- 替换原有的v5 bootstrap.bundle.min.js引入 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js" integrity="sha384-feJI7QwhOS+hwpX2zkaeJQjeiwlhOP+SdQDqhgvvo1DsjtiSQByFdThsxO669S2D" crossorigin="anonymous"></script>

内容的提问来源于stack exchange，提问作者Jonas Hüsser