bootstrap 5 的 nav-tabs 横向间距由 nav-link 的 margin-inline 控制，纵向间距取决于 tab-content 的 margin-top；默认用 margin-bottom: -1px 实现底边线重叠，不可直接修改该值。
Bootstrap 选项卡的 nav-tabs 默认间距在哪控制
Bootstrap 5 的 nav-tabs 默认用 margin-bottom: -1px 把 tab 项“拉”到一起，让下边框重叠，形成连续的底边线。这不是靠 padding 撑开的，而是靠 margin 负值“吸住”的——所以直接改 padding 不会拉开 tab 之间的横向距离，反而可能破坏对齐或触发换行。
要调横向间距（比如让每个 nav-link 左右留空），得作用在 nav-link 上；要调纵向间距（比如 tab 标题和内容区之间的空隙），得看 tab-content 或其子元素。
-
nav-link默认无左右padding（Bootstrap 5 是0.5rem 1rem，但实际视觉紧凑感来自 margin 负值+边框） - 横向间距建议加
margin-inline（推荐）或margin-right，避免影响 RTL 布局 - 别碰
.nav-tabs的margin-bottom，改它会导致底部边框断裂或内容上移
用 CSS 覆盖时为什么 !important 常被误用
Bootstrap 的样式优先级不低，尤其 v5 后大量用 :where() 降低权重，但自定义类如果写在 Bootstrap CSS 之后，通常不用 !important 就能覆盖。常见错误是：写了 .nav-link { padding: 1rem !important; }，结果发现 hover 状态下文字错位、图标偏移——因为 nav-link 内部有 display: inline-flex 和 align-items: center，粗暴加大 padding 会撑开高度，而 tab-content 的 border-top 并未同步下移，视觉就脱节了。
- 优先用更具体的选择器，比如
.my-tab-nav .nav-link，而不是靠!important - 改
padding时注意保持height和line-height协调，否则 active 状态下底边线会“浮起来” - 若必须调垂直位置，改
.tab-content的margin-top比动.nav-tabs更安全
data-bs-toggle="tab" 的容器对间距的影响常被忽略
Bootstrap 的 tab 切换依赖 data-bs-toggle="tab" 绑定，但这个属性本身不影响样式。真正影响间距的是你套在外部的结构：比如把 .nav-tabs 包在 .card-header 里，或者放在 .container 内，这些父容器自带 padding 或 margin，会间接放大“看起来的间距”。调试时容易以为是 tab 自身问题，其实是 .card-header 的 padding: 0.75rem 1.25rem 在起作用。
- 用浏览器开发者工具选中 tab 元素，往上逐层看 computed margin/padding，别只盯着
.nav-tabs - 如果用
.nav-fill或.nav-justified，它们会强制子项flex: 1，此时加margin可能被 flex 压缩失效，得配合min-width - 响应式断点下（如
sm），nav可能转为垂直堆叠，此时横向margin会变成纵向间距，需用margin-block或媒体查询隔离
兼容旧版 Bootstrap 4 的间距写法差异
Bootstrap 4 的 .nav-tabs > li > a 是块级结构，靠 float: left 排列，间距靠 li 的 margin-right 控制；而 Bootstrap 5 改用 display: flex，li 被移除，直接操作 .nav-link。如果你项目混用两版 CSS，或从 v4 升级，会发现原来写的 .nav-tabs > li { margin-right: 0.5rem; } 完全无效——因为 li 已不存在。
- v4 升 v5 时，把所有针对
li的间距规则，替换成.nav-tabs .nav-link+margin-inline-end - v4 的
nav-tabs底边线是靠border-bottom，v5 改成border-bottom: 0+ 每个nav-link的border-bottom，所以调间距时也要留意边框是否还连贯 - 不要依赖
nav-link的:first-child/:last-child去删 margin，v5 中它们可能被aria-hidden元素打断顺序
最麻烦的不是怎么加间距，而是加完后 active 状态的下划线是否还精准贴底、切换时内容区有没有意外滚动或重绘——这些细节得在真机和不同缩放比下点开每个 tab 看三遍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
