如何将导航栏项目向右对齐（不是品牌）答案

【问题标题】：how to align navbar items to the right(not the brand)如何将导航栏项目向右对齐（不是品牌）
【发布时间】：2021-01-16 01:59:26
【问题描述】：

堆栈溢出非常好。我目前在 Angela Yu 的训练营中。使用引导很有趣，但在导航栏部分我遇到了一些问题。我无法将导航项目向右移动。在 ul 中，我正在使用一个类 ml-auto，但它没有运行。为了您更好的体验，我正在输入完整的代码-

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="">tinDog</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse"  id="navbarTogglerDemo01" >
<ul class="navbar-nav ml-auto">
    <li  class="nav-item">
      <a class="nav-link" href="#"> contact</a>
    </li>
     <li  class="nav-item">
      <a class="nav-link" href="#"> Pricing</a>
    </li>
     <li  class="nav-item">
      <a class="nav-link" href="#"> download</a>
    </li>
</ul>
</div>
</div>

我已经很好地放置了所有其他元素！你们能给我一个方法或修改这个代码吗？

【问题讨论】：

请添加代码sn-p 谢谢

标签： html bootstrap-4 navbar

【解决方案1】：

上面的代码在我尝试时将它对齐到了右边，但我不得不关闭<nav>。在您的代码中，您忘记使用</nav> 将其关闭。此外，请确保通过在 html 的头部添加 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 正确链接引导 CDN。我修复了在较小屏幕上不起作用的切换按钮。这是我的代码，其中包含引导样式表。复制它并运行它，看看它是否适合你。

 <nav class="navbar navbar-expand-sm fixed-top navbar-dark bg-dark">
    <div class="container">
    <a class="navbar-brand text-white" href="#" >tinDog</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
    
       <ul class="navbar-nav ml-auto ">
           <li class="nav-item">
               <a class="nav-link text-light" href="#">Contact</a>
            </li>
            <li class="nav-item">
             <a class="nav-link text-light" href="#">Pricing</a>
          </li>
          <li class="nav-item">
             <a class="nav-link text-light" href="#">Download</a>
          </li>
          
          
       </ul>
    </div>
</div>
 </nav>

【讨论】：