3.1 导航组件：折叠与展开的临界点

3.1 导航组件：折叠与展开的临界点

navbar 是 Bootstrap 断点行为最显眼的组件：navbar-expand-{断点} 决定汉堡按钮何时消失、链接列表何时平铺。配套的 nav 家族（选项卡、胶囊）、breadcrumb 面包屑则基本不随断点变化。本节把导航的结构拆开，重点裁决「临界点选在哪一级」。

位置：组件四案的第一案。导航是页面的门面，也是第 2 章显隐裁决在组件内的最大规模应用——折叠态本身就是一次 display 断案。

立案：导航条在平板上挤成两行

后台系统的导航有九个入口，用了 navbar-expand-md：768px 起九个链接平铺，在 800px 宽的平板上折成两行，品牌 logo 被顶到中线以下。判：临界点选错。链接数量决定平铺所需宽度，九个入口的平铺宽度远超 md 档，应升到 navbar-expand-xl 或砍链接数量。expand 后缀不是「设计偏好」，而是一道宽度预算题。

图 3-1 navbar 两种形态的切换

取证：标准导航栏的结构与断点行为

<nav class="navbar navbar-expand-lg bg-body-tertiary" data-bs-theme="light">
  <div class="container-fluid">
    <!-- 左：品牌 -->
    <a class="navbar-brand" href="#">观察站</a>
    <!-- 中：汉堡按钮，data-bs-target 指向折叠面板；lg 起自动隐藏 -->
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
            data-bs-target="#mainNav" aria-controls="mainNav"
            aria-expanded="false" aria-label="切换导航">
      <span class="navbar-toggler-icon"></span>
    </button>
    <!-- 右：折叠面板，lg 起改为平铺 -->
    <div class="collapse navbar-collapse" id="mainNav">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">首页</a></li>
        <li class="nav-item"><a class="nav-link" href="#">栅格实验</a></li>
        <li class="nav-item"><a class="nav-link" href="#">组件图鉴</a></li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="搜索">
        <button class="btn btn-outline-success" type="submit">搜</button>
      </form>
    </div>
  </div>
</nav>
​

拖动窗口在 991 与 992 之间往返，能看到三层联动：汉堡按钮由 d-lg-none 隐藏、面板由 collapse 收起转为 navbar-expand 下的 d-flex 平铺、表单与链接从纵向堆叠转为横向排列。临界点前后是两套完全不同的排版，靠的正是第 2 章的显隐条文——组件内部也不过在用同一部法典。

裁决：临界点怎么选、nav 家族怎么配

临界点的裁决依据是「最宽链接行 + 品牌 + 右侧表单」的总宽度落在哪一档：总宽小于 720 选 expand-md，小于 960 选 expand-lg，再多就 expand-xl 或者干脆做「永远折叠 + 抽屉」的导航。另一个方向的裁决：移动优先的产品（内容消费类）常用「不写 expand」的全折叠导航，把一级入口做成底部标签栏——临界点判例里还包括「不设临界点」。

<!-- nav 家族：选项卡与胶囊，不随断点变化，属于纯 CSS 组件 -->
<ul class="nav nav-tabs mb-3">
  <li class="nav-item"><a class="nav-link active" href="#">进行中</a></li>
  <li class="nav-item"><a class="nav-link" href="#">已完成</a></li>
</ul>
<ul class="nav nav-pills flex-column flex-sm-row gap-2">
  <li class="nav-item"><a class="nav-link active" href="#">全部</a></li>
  <li class="nav-item"><a class="nav-link" href="#">待支付</a></li>
</ul>
<!-- 面包屑：层级路径，天然短，无需断点参与 -->
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">首页</a></li>
    <li class="breadcrumb-item active" aria-current="page">栅格实验</li>
  </ol>
</nav>
​

胶囊导航借了 flex-column flex-sm-row——手机竖排、sm 起横排。nav 家族本身不带断点行为，需要响应式时直接借用第 2.3 节的 flex 工具，这就是「组件 + 工具类胶水」的标准合作模式。

⚠️ 常见坑：折叠面板依赖 JS 插件。只引 CSS 没引 bundle 脚本时，汉堡按钮点了没反应——这是「组件没反应」类工单的头号成因，排查先看控制台有没有脚本 404，再看 data-bs-target 的选择器是否真的指向面板 id。

变式：需求演进的三次改判

变式一：链接涨到九个，expand-lg 下平铺溢出——改判 expand-xl，并把低频链接收进下拉。变式二：产品改版要求导航永远折叠（做成抽屉）——去掉 navbar-expand-*，汉堡按钮全区间在位，面板靠 collapse 类控制。变式三：要求折叠态下搜索框常驻（不进面板）——把表单挪出 navbar-collapse，放在 brand 与汉堡按钮之间，折叠时仍可见可点。

结案要点

• navbar-expand-{bp} 是导航的唯一临界点条文，与栅格断点同源同阈值；
• 临界点按「平铺总宽度预算」裁决，宁晚勿早，极端情况判「永远折叠」；
• 折叠态 = 显隐条文 + collapse 插件，没脚本就没有展开动作；
• nav/选项卡/面包屑是纯 CSS 组件，响应式需求外借 flex 工具完成。

下一节审第二案：表单这个「合成组件」。