carousel导航圆点默认位于轮播图容器底部中央；bootstrap 5的.carousel-indicators默认绝对定位在.carousel内部、图片区域下方，受overflow: hidden裁剪，需设overflow: visible及负bottom值（如-24px）使其移出图片边界。
Carousel导航圆点默认位置在哪？
Bootstrap 5 的 carousel-indicators 默认是绝对定位在轮播图容器内部（.carousel）的底部中央，它被包裹在 .carousel-inner 外层但仍在 .carousel 内，所以「外部」不是指 DOM 结构外，而是视觉上脱离图片区域——比如放在图片下方容器之外、甚至侧边或顶部空白区。
怎么把圆点移出图片容器边界？
关键不是改 HTML 结构（不推荐挪动 .carousel-indicators 到 .carousel 外），而是用 CSS 覆盖其定位和父容器的 `overflow` 行为：
-
.carousel默认有overflow: hidden，会裁掉超出图片区域的内容，必须先取消它 -
.carousel-indicators默认 top/bottom 值基于.carousel高度计算，要让它「出来」，得显式设bottom: -30px或类似负值 - 如果想放在左侧/右侧，改
left或right，同时设top: 50%和transform: translateY(-50%)
示例（圆点放图片正下方、容器外）：
.carousel {
overflow: visible;
}
.carousel-indicators {
bottom: -24px; /* 向下伸出 */
position: absolute;
}
为什么加了样式还是被裁掉？
常见原因有三个：
- 父级容器（比如
.container或自定义 wrapper）也设置了overflow: hidden，得一并检查并移除 - Bootstrap 5.3+ 对
.carousel-indicators加了z-index: 1，如果页面其他元素层级更高（如 fixed header），圆点可能被遮挡，需手动提高z-index - 用了
.carousel-fade动画时，指示器定位逻辑没变，但 opacity 过渡可能让它们闪一下，建议单独给.carousel-indicators加pointer-events: all确保点击正常
移动端适配要注意什么？
圆点外置后容易在小屏上挤出屏幕或重叠文字：
- 用
@media (max-width: 576px)降低bottom值（比如-16px），或改用margin-top+ 相对定位更稳妥 - 避免用固定
width和height设置圆点尺寸，优先用rem或em，配合flex居中 - 如果轮播图高度是
vh单位，圆点的bottom值需配合视口动态调整，纯 CSS 难以精确控制，可考虑 JS 监听 resize 后重算
真正麻烦的不是定位本身，而是当轮播图嵌在卡片、模态框或响应式栅格里时，外层组件的 padding/margin 会干扰「外部」的视觉预期——这时候得一层层查 computed styles，而不是只盯着 .carousel。
