bootstrap 5 默认搜索框“扁平突兀”因.form-control移除圆角与阴影、高度固定，致其在紧凑navbar中居中难、边框生硬、对齐差；需用inline-flex布局、rounded-pill统一圆角、ms-n4负边距嵌入按钮，并补深色模式及聚焦态样式。
Bootstrap 5 默认搜索框为什么看起来“扁平又突兀”
因为 .form-control 在 Bootstrap 5 中默认移除了圆角（border-radius: 0）和阴影，且高度固定为 calc(1.5em + 0.75rem + 2px)，而导航栏（.navbar）本身高度紧凑（通常约 56px），导致输入框垂直居中困难、边框生硬、与右侧按钮对不齐。
常见现象包括：搜索框上下留白过大、左右 padding 不足、聚焦时蓝色边框太刺眼、在深色 navbar 上文字对比度低。
- 用
.navbar-nav .nav-link包裹<input>会导致点击区域错位，别这么干 - 直接给
.form-control加height: 100%会破坏响应式重置逻辑，优先用 padding 微调 - 不要覆盖
$input-border-radius全局变量——只局部改一个搜索框，用内联或 scoped class 更安全
如何让搜索框真正“嵌入” navbar（非 flex 拉伸）
核心是放弃 .input-group 的默认 flex 行为，改用 display: inline-flex + 精确尺寸控制。Navbar 内部元素默认是 align-items: center，所以输入框必须自身具备可居中基线。
<div class="navbar-nav ms-auto">
<div class="d-inline-flex align-items-center">
<input type="search" class="form-control rounded-pill ps-4 pe-5" placeholder="搜索..."><button class="btn btn-outline-secondary rounded-pill ms-n4 position-relative z-1">
<i class="bi bi-search"></i>
</button>
</div>
</div>
-
.rounded-pill给 input 和 button 同样圆角，视觉统一 -
ps-4 pe-5避免文字贴左/图标遮挡，比默认px-3更宽松 -
ms-n4让 button 左侧负边距，实现“按钮嵌入输入框右端”的效果 -
position-relative z-1确保按钮压在 input 边框上，不被裁剪
聚焦态和深色模式下的关键样式补丁
Bootstrap 默认 :focus 只加 box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25)，在深色 navbar 背景下几乎不可见；且未处理 :focus-visible 的可访问性降级问题。
推荐在自定义 CSS 中追加：
.navbar-light .form-control:focus,
.navbar-dark .form-control:focus {
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}
.navbar-dark .form-control {
background-color: #343a40;
color: #fff;
border-color: #495057;
}
.navbar-dark .form-control::placeholder {
color: #6c757d;
}
- 深色 navbar 下必须显式设
background-color，否则继承 body 背景变透明 - 别依赖
.bg-dark类——它只影响背景，不改 input 内部颜色体系 - 移动端 Safari 对
::placeholder渲染不稳定，建议同时加color: #6c757d !important
移动端折叠后搜索框的显示逻辑怎么写
Bootstrap 的 .navbar-collapse 默认隐藏所有内容，但搜索框往往需要在折叠菜单里保留（尤其带 submit 功能时）。不能简单用 .d-none .d-md-block ——那会让折叠后完全消失。
- 把搜索块放在
<div class="navbar-collapse collapse"> 内部，而非外面 <li>用 <code>.d-flex .d-md-none控制仅在折叠态显示，配合order-1提前渲染顺序 - 提交行为要绑定到 form 的
submit事件，而不是 button click——避免回车无响应 - 折叠菜单里的搜索框建议去掉 button，改用
type="search"自带清空按钮（Safari/Chrome 支持）
最易忽略的是：折叠后若未重置 width，搜索框可能撑破菜单宽度。务必加 width: 100% 并配合 max-width: none。
