请尝试以下代码：

/* There is no href destination, so you need to use a style to make the cursor a pointer */

.dropdown-toggle {
  cursor:pointer;
}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"/>

<!-- Navbar -->
<nav class="navbar">
   <div class="container-fluid">
      <a class="navbar-brand" href="#">Navbar</a>
      <div class="nav">
      <!-- This is essential for the alignment -->
         <ul class="navbar nav">
            <li class="dropdown">
               <a class="dropdown-toggle nav-link" data-bs-toggle="dropdown" aria-expanded="false">
               <strong>Dropdown</strong>
               </a>
               <!-- Make sure to use "dropdown-menu-end", or else the dropdown will overflow -->
               <ul class="dropdown-menu dropdown-menu-end text-small shadow">
                  <li><a class="dropdown-item" href="#">Action #1</a></li>
                  <li><a class="dropdown-item" href="#">Action #2</a></li>
                  <li><a class="dropdown-item" href="#">Action #3</a></li>
                  <li>
                     <hr class="dropdown-divider">
                  </li>
                  <li><a class="dropdown-item" href="#">Another action</a></li>
               </ul>
            </li>
            <li>
               <a type="button" data-bs-toggle="collapse" data-bs-target="#searchbarcontainer" aria-expanded="false" aria-controls="searchbar"><i class="fas fa-search"></i></a>
            </li>
         </ul>
      </div>
   </div>
</nav>
<!-- / Navbar -->

我所做的就是使用无序列表，使它里面的所有内容都右对齐，所以如果你在ul里面的nav中添加任何东西，它都是右对齐的。
我建议在你的css中添加一个断点来移除233px的可见性，这样导航栏看起来就不会很奇怪了，不过你也可以选择使用navbar-toggler。
我会一直建议阅读官方Bootstrap团队关于导航栏和间距的文档。
希望这有帮助!
进一步阅读：
https://getbootstrap.com/docs/5.3/components/navbar/
https://getbootstrap.com/docs/5.3/utilities/spacing/