Bootstrap 5 的 .carousel-indicators 必须用 gap 而非 margin，因其内部为 flex 容器且子项为 [data-bs-target] 按钮而非 li；gap 方向自适应、不干扰盒模型，但需确保 display: flex、避免 flex-shrink: 0 过宽，并在 Safari 14.0–14.4 中拆分为 row-gap/column-gap 兼容。
Bootstrap 5 的 .carousel-indicators 必须用 gap，不是 margin
因为 Bootstrap 5 把指示器改成了 display: flex 容器，内部是 [data-bs-target] 按钮，不是 li 元素。写 .carousel-indicators li { margin-right: 8px; } 根本不生效——DOM 里压根没 li，选择器就匹配失败。
更麻烦的是：用 margin 在 RTL 布局、响应式断点切换或某些 CSS 重置库下，容易方向反、间隙叠加、换行错位。比如全局有 button { margin: 0.25em; }，就会污染指示器间距。
gap 是 flex 原生属性，只作用于相邻子项之间，不参与盒模型计算，方向自适应，不会被书写模式干扰。
gap 生效的硬性前提：检查容器 display 和 wrap 状态
即使写了 .carousel-indicators { gap: 10px; }，也可能“看起来没反应”，常见原因不是代码错，而是布局条件不满足：
-
.carousel-indicators的display被覆盖成block或inline（inline-flex仍支持gap，但旧版 Safari 需要-webkit-gap） - 没加
flex-wrap: wrap却指望row-gap生效（单行 flex 默认不触发row-gap） - 子项设置了
flex-shrink: 0且内容过宽，把容器撑满，视觉上“压扁”了间隙 - 轮播图嵌套在
position: absolute或transform容器里，部分浏览器会降级 flex 行为，可临时加display: flex !important;强制
移动端兼容写法：别用 gap: 12px，拆成 row-gap 和 column-gap
Safari 14.0–14.4（iOS 14.0–14.4）完全忽略 gap 简写，包括单值和双值写法，但支持分开声明的 row-gap 和 column-gap。DevTools 的“Computed”面板里看不到 gap 值，就是这个原因。
安全写法是直接写两个属性：
.carousel-indicators {
row-gap: 10px;
column-gap: 10px;
}
这样 Chrome for Android、Firefox iOS、Safari ≥14.0 全部兼容。如果只需要水平间距（圆点默认一行排开），row-gap: 0 就够了。
注意：gap 不支持百分比单位，也别混用 gap: 10px 和 row-gap: 8px，后者会覆盖行方向间距，造成视觉失衡。
首尾留白、响应式缩放和深色模式下的视觉陷阱
gap 只管子项之间，不管容器边缘。移动端常见的“左右各留 16px，圆点居中等距”需求，不能靠 gap 解决——必须用 .carousel-indicators { padding: 0 16px; } 控制首尾留白。
小屏收紧间距，用媒体查询改 gap 值，而不是切回 margin：
@media (max-width: 576px) {
.carousel-indicators {
row-gap: 6px;
column-gap: 6px;
}
}
深色模式下若指示器背景太浅（如 #eee），间隙可能被误认为“空白”，其实 gap 已生效，只是对比度低——打开开发者工具看“Computed”里的 row-gap 和 column-gap 值是否符合预期。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
