如何调整Bootstrap Carousel轮播图标题至图片下方

1. 把轮播标题移到图片下方（无需JS，自动同步切换） #

Bootstrap的carousel-caption默认基于carousel-item做绝对定位，直接修改CSS就能调整位置，而且轮播本身会自动同步标题和图片的切换：

/* 确保轮播项是相对定位，作为标题的定位基准容器 */
.carousel-item {
  position: relative;
}

/* 将标题定位到轮播项底部（图片下方） */
.carousel-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  /* 可选：添加内边距让标题和图片拉开距离 */
  /* padding-bottom: 15px; */
}

如果你的轮播图有固定高度，可根据需求调整bottom的数值来控制标题与图片的间距。

2. 仅给轮播内的标题加白色背景 #

你之前给全站header下的h1/h2/h3加了白色背景，现在用精准的CSS选择器只针对轮播内的标题设置样式，避免影响全局：

/* 仅对轮播标题容器内的h1、h2、h3应用白色背景 */
.carousel-caption h1,
.carousel-caption h2,
.carousel-caption h3 {
  background-color: #fff;
  padding: 6px 10px;
  display: inline-block; /* 让背景只包裹文字区域，不占满整行 */
}

这样设置后，只有轮播图里的标题会有白色背景，其他页面的标题不受影响。

内容的提问来源于stack exchange，提问作者Naomi Rees