如何在导航栏引导程序 5 中将搜索栏与另一侧对齐答案

【问题标题】：How to align the search bar to the other side in navbar bootstrap 5如何在导航栏引导程序 5 中将搜索栏与另一侧对齐
【发布时间】：2022-10-26 04:17:21
【问题描述】：

我有一个导航栏，导航栏有一些在左侧对齐的项目和一个在导航栏右侧对齐的搜索栏。我想将右侧的项目和右侧的搜索栏对齐，但是当我添加 ms-auto 类时，只有项目向右移动，搜索栏不会向左移动并停留在那里

我怎样才能基本上旋转导航栏，使项目保持在右侧，搜索栏保持在左侧？

这是我的代码：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
   <div class="container-fluid">
      <div class="collapse navbar-collapse" id="navbarScroll">
         <ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height:100px;">
            <li class="nav-item">
               <a href="#" class="nav-link active" aria-current="page">Home</a>
            </li>
            <li class="nav-item">
               <a href="#" class="nav-link">About us</a>
            </li>
            <li class="nav-item">
               <a href="#" class="nav-link">Contact us</a>
            </li>
         </ul>
         <form class="d-flex">
            <input type="search" class="form-control me-2" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success" type="submit">Search</button>
         </form>
      </div>
   </div>
</nav>

【问题讨论】：

将dir="rtl" 放在html 标签上。
@ServeshChaturvedi 我做了并将 me-auto 更改为 ms-auto 并且项目不会像左侧那样粘在右侧，项目和右边框之间有某种空间
很抱歉，我没有收到您的询问。 ms-auto 在 ul 中为我工作。请分享一张图片来说明您的问题
我检查了引导文件，发现我必须使用 rtl 文件，它刚刚解决了。谢谢您的帮助

标签： html css twitter-bootstrap bootstrap-5

【解决方案1】：

我更改了 form 和 ul 之间的顺序，并添加了一个类 d-flex justify-content-between 到 div collapse

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <title>Carusel</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous" defer></script>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container-fluid">
           <div class="collapse navbar-collapse d-flex justify-content-between" id="navbarScroll">
              <form class="d-flex">
                 <input type="search" class="form-control" placeholder="Search" aria-label="Search">
                 <button class="btn btn-outline-success" type="submit">Search</button>
              </form>
               <ul class="navbar-nav my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height:100px;">
                 <li class="nav-item">
                    <a href="#" class="nav-link active" aria-current="page">Home</a>
                 </li>
                 <li class="nav-item">
                    <a href="#" class="nav-link">About us</a>
                 </li>
                 <li class="nav-item">
                    <a href="#" class="nav-link">Contact us</a>
                 </li>
              </ul>
           </div>
        </div>
     </nav>
</body>
</html>

【讨论】：