Navbar默认无圆角，圆角通常来自子元素（如.nav-link、.navbar-brand）或外层容器添加的rounded类；需精准重置子元素border-radius才能彻底去除。

Navbar 默认圆角从哪来

bootstrap 5 的 .navbar 本身不设 border-radius，真正带圆角的是它的子元素——比如 .navbar-brand 图标、.navbar-nav 内部链接，或者你用了 .navbar-expand-* 后自动包裹的 .container / .container-fluid（某些主题或自定义布局里会加）。但最常见、最容易被误判的来源是：.navbar 外层容器或父级 div 被加了 rounded 类，或者项目全局 css 里写了 .navbar { border-radius: ... }。

直接覆盖 .navbar 的 border-radius 无效？

如果你写了 .navbar { border-radius: 0 !important; } 却没生效，大概率是因为：

• 选择器优先级不够——Bootstrap 5 的部分变体（如 .navbar-dark 或 .bg-* ）会带更高 specificity 的规则
• 你改的是 .navbar，但实际圆角在 .navbar-collapse 或 .navbar-nav 上（尤其用 flex 布局时，某些浏览器会把圆角“继承”到 flex item 边缘）
• 用了 .navbar-expand-lg 后，内部 .navbar-nav 的第一个/最后一个 .nav-link 可能被加了 rounded-start/rounded-end

真正起效的三种写法

按推荐程度排序：

✅ 推荐：精准定位并重置子元素圆角

.navbar .nav-link,
.navbar .navbar-brand,
.navbar .navbar-toggler {
  border-radius: 0 !important;
}

✅ 兼容旧版或快速验证：加前缀 + !important（虽略冗余，但覆盖力强）

VPS Bootstrap

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

下载

.navbar {
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
  border-radius: 0 !important;
}

✅ 如果确定整个导航栏区域都要直角（含外层容器），且不介意影响其他组件，可用通配重置（慎用）：

.navbar * {
  border-radius: 0 !important;
}

容易被忽略的视觉残留点

即使 .navbar 和所有子项都清掉了 border-radius，仍可能看到“疑似圆角”：

• .navbar-brand 里的 <img> 自带 .rounded 类（检查是否误加）
• .navbar-toggler 在折叠态下是按钮，默认有 border-radius: 0.375rem，必须显式加 rounded-0 或覆盖
• 某些 UI 框架（如 AdminLTE 衍生主题）会在 .navbar 上叠加 box-shadow，阴影边缘会模拟出圆角感，需同步设 box-shadow: none

真正干净的直角 Navbar，往往要连 border、box-shadow、overflow 一起看——圆角只是表象，底层是整套视觉节奏的协同设计。