Question

堆栈溢出非常好。我目前在 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>

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

Answer 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>

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

1 个答案: