ms-auto 必须加在 <form> 上且该 <form> 是 .container-fluid 的直系子元素，否则无效；因其是 flex margin 工具类，仅作用于 flex 容器的直接子元素。
ms-auto 必须加在 <form> 上，且该 <form> 必须是 .container-fluid 的直系子元素——加错位置或嵌套过深，就完全不生效。
为什么 ms-auto 加在 <input> 或 <ul> 里没用
因为 ms-auto 是 flex 布局的 margin 工具类，只对 flex 容器的**直系子元素**起作用。.navbar 内部的 .container-fluid 是 flex 容器，它的子元素（比如 <div class="navbar-nav">、<form>）才能响应 ms-auto。而 <input> 是 <form> 的后代，<ul class="navbar-nav"> 又常被包在 <div class="collapse navbar-collapse"> 里——这两者都不是 .container-fluid 的直接孩子，所以加了也白加。
-
<form class="d-flex ms-auto">✅ 正确：表单作为.container-fluid的子项，自动右对齐 -
<input class="ms-auto">❌ 无效：脱离 flex 主轴控制层级 -
<ul class="navbar-nav ms-auto">⚠️ 错位：整个导航列表右移，品牌区和居中区域全被挤偏
别用 float: right 强行右对齐
float: right 在 Bootstrap 5+ 的 navbar 中基本失效，因为 .navbar-collapse 和 .container-fluid 都是 flex 容器，浮动元素会脱离 flex 流，导致：
- 移动端折叠后搜索框消失或错位（
float不响应display: none切换） - 按钮与输入框垂直不对齐（
align-items: center对浮动子项不生效） - 必须手动加
clear: both或父容器overflow: hidden，增加维护成本
ms-auto 是原生 flex 工具类，天然支持 navbar-expand-lg 等断点，无需 hack。
想让搜索框宽度固定为 50%，又保持最右侧
宽度和右对齐是两个独立需求，不能混用一个 class 解决。关键在于分层处理：
- 右对齐靠
ms-auto加在<form>上 - 宽度控制靠内联样式或自定义 class 作用于
<input>或<div class="input-group"> - 绝对不要给
<form>设width: 50%——这会让它只占一半空间，ms-auto就没“剩余空间”可吞，右对齐直接失效
示例写法：
<form class="d-flex ms-auto">
<div class="input-group" style="width: 50%;">
<input class="form-control" type="search" placeholder="Search">
<button class="btn btn-outline-light" type="submit">Go</button>
</div>
</form>
小屏幕下隐藏搜索框的兼容写法
直接加 d-none d-lg-flex 到 <form> 上即可，但注意顺序：d-lg-flex 必须在 d-none 后面，否则会被覆盖。这个组合会在 lg 及以上断点显示，其余断点彻底隐藏 DOM，不会影响键盘焦点或屏幕阅读器。
真正容易被忽略的是容器层级——navbar 的 flex 流分三层：品牌区、折叠容器（.navbar-collapse）、独立右对齐区。把搜索 <form> 塞进 .navbar-nav 里，等于把它锁进了第一层流，再怎么加 ms-auto 都推不出去。
