bootstrap
轮播图（carousel）
css
样式未生效，通常因选择器错误（如误用 `.c-item`）、样式加载顺序不当或
html
结构不符合 bootstrap 5 规范所致；需确保使用 `.carousel-item` 类、外链自定义 css 在 bootstrap 之后加载，并为图片添加语义化类（如 `.c-img`）配合 `object-fit` 控制显示效果。
在使用 Bootstrap 5 构建轮播图时，CSS 样式失效是一个高频问题。根本原因往往不是代码逻辑错误，而是
选择器命名偏差
和
资源加载顺序疏忽
。例如，问题中尝试使用的 .c-item 并非 Bootstrap 官方类名——正确类名为 .carousel-item（注意完整拼写与连字符）。若 CSS 中定义了 .c-item { height: 280px; }，而 HTML 中实际使用的是
，该样式将完全不被匹配，自然无法生效。
✅ 正确做法如下：
确保 CSS 选择器与 Bootstrap 类名严格一致
：
保证自定义 CSS 在 Bootstrap 之后加载
：
在 中， 标签的顺序决定样式优先级。必须将自定义样式表（如 style.css）置于 Bootstrap CSS 之后，否则会被其重置规则覆盖：
验证 HTML 结构符合 Bootstrap 5 规范
：
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
使用 data-bs-* 属性（而非旧版 data-slide-to）；
.carousel-item 必须嵌套在 .carousel-inner 内；
图片需添加 d-block w-100 类以确保响应式铺满容器，并配合自定义类（如 c-img）应用样式：
⚠️ 注意事项：
避免在 或 标签上直接写内联样式（如 style="height: 100%;"），易引发高度计算异常；推荐通过 CSS 类控制布局；
若使用 Django 模板（如本例），确认 {% static %} 路径已正确配置，且 style.css 文件存在并可被服务器访问；
浏览器
开发者工具（F12 → Elements → Styles）是调试利器：检查目标元素是否被 .carousel-item 选中、是否有 !important 冲突、是否被更高优先级样式覆盖。
总结：解决 Carousel 样式不生效问题，核心在于「三对齐」——
类名对齐官方文档、加载顺序对齐依赖关系、HTML 结构对齐 Bootstrap 5 DOM 规范
。一次修正，即可让高度控制、图片裁剪、滤镜效果等 CSS 精准生效。
/* ✅ 正确：匹配 Bootstrap 5 默认类名 */
.carousel-item {
height: 280px;
}
/* ✅ 推荐为图片单独定义类（如 c-img），便于精细化控制 */
.c-img {
height: 100%;
width: 100%;
object-fit: cover; /* 保持宽高比并裁剪填充 */
filter: brightness(0.6); /* 添加暗化效果，提升文字可读性 */
}