Bootstrap导航栏form-inline类失效，如何防止表单项堆叠？

问题核心原因 #

• 当前引入的CSS为 Bootstrap 5.0.0-beta2 版本，但使用了仅在Bootstrap 4及更早版本生效的form-inline类。
• Bootstrap 5 已正式移除form-inline类，该类在当前版本下无任何样式效果，表单默认采用块级布局，导致输入框与提交按钮换行排列。
• 输入框使用的间距类mr-sm-2为Bootstrap 4的旧命名规则，Bootstrap 5 改用逻辑边距体系，右外边距的类名已从mr（margin right）替换为me（margin end）。

无自定义CSS的解决方法 #

直接替换表单相关类名，适配Bootstrap 5规范即可，无需改动DOM结构：

• 移除已废弃的form-inline类，改用flex布局类d-flex实现子元素横向排列
• 将输入框的mr-sm-2替换为me-sm-2，保证输入框与按钮的间距符合预期

修改后的表单代码片段：

<form class="d-flex ms-auto">
  <input class="form-control me-sm-2" type="search">
  <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
</form>

额外适配提示：若需要导航栏折叠功能正常运行，需将折叠按钮的旧版属性data-toggle、data-target替换为Bootstrap 5规范的data-bs-toggle、data-bs-target，同时引入对应版本的Bootstrap JS文件，避免版本不兼容引发其他功能异常。

内容的提问来源于stack exchange，提问作者TiagoRibeiro