加了input-group-sm后输入框仍没变小，是因为该类仅调整容器间距和对齐，不改变.form-control字体和内边距；必须同时为.form-control和按钮添加-sm类，并注意父容器flex样式干扰及navbar高度对齐问题。
Bootstrap导航栏里.input-group怎么设成小尺寸
直接给 .input-group 加 input-group-sm 类就行，但必须同时确保内部 .form-control 和按钮也响应尺寸变化——否则只缩容器、不缩内容，会错位或留白。
为什么加了input-group-sm后输入框还是没变小
常见失效原因不是类名写错，而是结构或样式覆盖干扰了尺寸继承：
-
.input-group-sm只作用于.input-group自身的 padding 和子元素垂直对齐，不自动缩小.form-control的字体和内边距 - 如果
.form-control单独加了form-control-lg或自定义font-size/padding，会盖过input-group-sm的效果 - 在
.navbar里，.input-group若被包在.nav-item或.navbar-nav中，而这些父容器有 flex 相关样式（如flex-shrink: 0），也可能压制高度收缩
正确调小的三步组合
要让整个搜索框组件在导航栏中真正“变矮”，得同步控制三层：
- 外层：
<div class="input-group input-group-sm"> —— 提供基础高度压缩和间距重置 <li>输入框：<code><input class="form-control form-control-sm">—— 必须显式加尺寸类，否则input-group-sm不影响它 - 按钮：
<button class="btn btn-sm"></button>—— 按钮类也要带-sm，否则按钮比输入框高，视觉割裂
示例代码：
<div class="input-group input-group-sm"> <input type="search" class="form-control form-control-sm" placeholder="搜索"><button class="btn btn-outline-secondary btn-sm"><i class="bi bi-search"></i></button> </div>
导航栏里特别要注意的坑
在 .navbar 中调小 .input-group 容易踩两个隐形雷：
-
.navbar默认有padding和height约束，如果input-group-sm压得太低（比如低于 32px），可能和.navbar-brand或其他.nav-link垂直对不齐；此时建议微调.input-group的margin-top或用align-self-center - Bootstrap 5 的
input-group-sm高度是calc(1.5em + 0.5rem + 2px)，若你改过全局$font-size-base或$border-width，实际高度会联动变化，别硬记像素值
最常被忽略的是：按钮没加 btn-sm。它看起来只是“小一点”，实则导致按钮基线偏移、图标上下晃动、点击区域和输入框不匹配——这种细节在触屏设备上尤其明显。
