Bootstrap怎么自定义Navbar导航栏的断点像素-Bootstrap教程-PHP中文网

navbar 折叠断点由 bootstrap 的 $grid-breakpoints 变量决定，修改需重定义该 sass 变量并重新编译；纯 css 方案可用媒体查询强制控制 .navbar-collapse 显示状态；navbar-expand 无后缀类实现始终展开，但不支持自定义像素断点。

navbar 默认断点是 576px，但实际生效的是 `navbar-expand-` 类对应的断点

bootstrap 5 的 navbar 折叠行为不靠媒体查询像素值硬编码，而是绑定在响应式断点类上。比如 navbar-expand-md 表示“在 md 及更大断点展开”，而 md 默认对应 768px（最小宽度），不是折叠临界点本身。真正决定何时收起的，是该断点的 min-width 值 —— 小于它时 navbar 折叠，等于或大于时展开。

所以改断点，本质是改断点定义，不是改某一行 CSS。

修改断点需覆盖 Bootstrap 的 `$grid-breakpoints` Sass 变量

直接改 CSS 无效，因为 navbar 的折叠逻辑由预编译的类（如 .navbar-expand-md）驱动，这些类依赖全局断点配置。必须在引入 Bootstrap 源码前重定义变量：

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);
<p>// 比如把 md 断点从 768px 改成 900px：
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 900px,  // ← 关键改动
lg: 1100px,
xl: 1300px,
xxl: 1500px
);</p><p>@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";
// ...其余 import</p>

必须在 @import "bootstrap/scss/functions" 之前覆盖 $grid-breakpoints
所有断点名（xs, sm 等）必须保留，否则 navbar-expand-sm 这类类名会失效
改完后重新编译 CSS，navbar-expand-md 就会在 ≥900px 时展开

不想用 Sass？用 CSS 媒体查询强行覆盖折叠逻辑

如果只能用 CDN 或纯 CSS 环境，可以绕过类名，用媒体查询直接控制 .navbar-collapse 的显示状态：

VPS Bootstrap

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

下载

@media (min-width: 850px) {
  .navbar-collapse {
    display: flex !important;
  }
  .navbar-toggler {
    display: none;
  }
}
<p>@media (max-width: 849.98px) {
.navbar-collapse {
display: none !important;
}
.navbar-toggler {
display: flex;
}
}</p>

注意 !important 是必须的，否则被 Bootstrap 内联 style="display: block" 覆盖
断点值（如 850px）要避开 Bootstrap 原有断点，避免冲突；建议用非整数（如 849.98px）防止四舍五入导致边界模糊
这个方式不生成新类名，所以 HTML 中仍用 navbar-expand-lg 之类也无妨，但语义已失效

用 `navbar-expand` 无后缀类可实现“始终展开”，但别滥用

navbar-expand（无破折号和断点名）是 Bootstrap 提供的“永远不折叠”方案，它移除了所有媒体查询，让 navbar 始终水平展开：

<nav class="navbar navbar-expand navbar-light bg-light"><div class="container-fluid">
    <a class="navbar-brand" href="#">Logo</a>
    <div class="navbar-collapse"> <!-- 注意：这里没加 collapse -->
      <ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">Home</a></li>
      </ul>
</div>
  </div>
</nav>