Bootstrap 导航栏底部阴影 shadow-sm 类名应用-Bootstrap教程-PHP中文网

shadow-sm 不能直接为 .navbar 添加底部阴影，因其 box-shadow 偏移为 0 且被纯色背景覆盖；须用带垂直偏移的自定义 class（如 navbar-bottom-shadow）配合 rem 单位、深色模式适配及正确加载顺序实现。

shadow-sm 类不能直接给 bootstrap 导航栏（.navbar）加底部阴影——它会失效，不是你写错了，是 css 层叠和盒模型限制导致的。

为什么 `shadow-sm` 加在 `.navbar` 上没反应

导航栏默认有纯色背景（如 background-color: #fff），且自身高度固定、无内边距撑开视觉空间；shadow-sm 产生的 box-shadow 是绘制在元素“外边缘”的，但被 .navbar 的背景色和布局压住，人眼根本看不到。

检查 computed styles 会发现 box-shadow 确实存在，但 z-index 和背景色让它不可见
.navbar-light / .navbar-dark 这类修饰类会覆盖或重置阴影行为
shadow-sm 的值是 0 0.125rem 0.25rem rgba(0,0,0,0.075)，偏移量为 0，没有“向下落”的方向感，自然不显“底部”

想让导航栏有底部阴影，得绕过 `shadow-sm` 直接写 CSS

必须用带垂直偏移的 box-shadow，并确保样式加载顺序正确（你的 CSS 在 Bootstrap 之后）：

给导航栏加一个自定义 class，比如 navbar-bottom-shadow

写明确定义：

.navbar-bottom-shadow { box-shadow: 0 2px 6px rgba(0,0,0,0.08); }

避免用 !important，除非你无法控制 CSS 加载顺序
别把 class 加在 .navbar-brand 或 .nav-link 上——它们不是容器，加了也白加

响应式下阴影容易“跳变”，怎么稳住

导航栏在小屏折叠时高度会变（比如从 56px → 48px），如果阴影参数用 px 写死，缩放时视觉会突兀断层。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

改用 rem 单位：box-shadow: 0 0.125rem 0.375rem rgba(0,0,0,0.08)
不要依赖 height 或 padding 去“配合”阴影——阴影是外绘的，跟元素内部尺寸无关
测试真机展开/收起汉堡菜单动画阶段，确认 .navbar-collapse 出现时不丢失阴影——应统一挂载在最外层 .navbar 上，而非子容器

深色模式下阴影发灰或看不清

Bootstrap 5.3+ 支持 data-bs-theme="dark"，但 rgba(0,0,0,0.08) 在深背景上几乎不可见，而照搬浅色值又显得脏。

用 CSS 自定义属性解耦：

:root { --navbar-shadow: 0 0.125rem 0.375rem rgba(0,0,0,0.08); }
[data-bs-theme="dark"] { --navbar-shadow: 0 0.125rem 0.375rem rgba(255,255,255,0.06); }
.navbar-bottom-shadow { box-shadow: var(--navbar-shadow); }