导航栏的网格系统 （Bootstrap） 问题

问：

我想为网站提供一个导航栏，可以使用“显示更多”按钮进行扩展，以便提供更多的过滤器选项。导航栏应该只包含一个搜索字段和按钮 - 并且两者都在一行中。

但是，它看起来像这样： 打开有问题的映像

该项目使用 Bootstrap，我也尝试过网格系统并查看了文档，但这些尝试都没有成功。

我还设法将两个组件放在一行中，但这导致搜索字段的宽度非常小。

代码如下：

  <nav class="navbar navbar-light bg-light">

    <div class="container">
      <div class="row d-flex align-items-center">
        <div class="col-lg-6 input-group">
          <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
          <button class="btn btn-outline-secondary" type="button">Button</button>
          
          <!--<div class="input-group-append">
            <button class="btn btn-outline-secondary" type="button">Button</button>
          </div>--> 
        </div>

        <div class="col-lg-4">
          <button class="btn btn-link" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">Show more</button>
        </div>

      </div>
      
    </div>

  </nav>

  <div class="collapse" id="navbarToggleExternalContent" data-bs-theme="dark">
    <div class="bg-dark p-4">
      <h5 class="text-body-emphasis h4">Collapsed content</h5>
      <span class="text-body-secondary">Toggleable via the navbar brand.</span>
    </div>
  </div>

我对任何建设性的答案都感到高兴！:)

我还想知道是否有更好（最好是免费）的 Bootstrap 替代品？感谢您的任何提示！

见上文，一切都在那里描述