Html 引导表单内联不工作，如何防止它们堆叠？

我有一个非常基本的测试导航栏，带有一个搜索输入框和相应的搜索按钮。我使用的是引导类

表单内联

，但搜索按钮位于搜索输入下方，尽管有足够的空间。 您可以检查代码笔，以便对其进行测试。无论哪种方式，html代码都是这样的：

导航
搜索

---

这是一种不需要将按钮置于表单标签之外，也不需要任何css就可以工作的功能。

您正在调用bootstrap v5，并且

。表单内联

从v5开始被删除：

您应该使用

.row

和

.col

构建表单布局

<form class="row ms-auto">
  <div class="col">
      <input class="form-control mr-sm-2" type="search">                
  </div>
  <div class="col-auto">
      <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
  </div>
</form>

搜索

---

您可以在这里找到所有内容：

现在工作正常，谢谢！