如何将Navbar中的Sign Up与Login选项显示在右侧？

Since your code uses Bootstrap utility classes (like d-flex and align-items-center), we can leverage Bootstrap's flexbox tools to easily push the Sign Up/Login links to the right side of your navbar. Here's the adjusted code:

<div class="container d-flex align-items-center">
  <nav class="nav-menu d-flex align-items-center w-100">
    <ul>
      <li class="active"><a href="index.html">Home</a></li>
      <li><a href="#"><i class="fa fa-id-badge"></i> SUBSCRIBE</a></li>
    </ul>
    <!-- Add ms-auto to push this group to the right -->
    <ul class="ms-auto">
      <li><a href="#"><i class="fa fa-user"></i> Sign Up</a></li>
      <li><a href="#"><i class="fa fa-user"></i> Login</a></li>
    </ul>
  </nav><!-- .nav-menu -->
</div>

Key Changes Breakdown: #

• Added w-100 to .nav-menu to make it take full width of its container—this ensures the flexbox spacing works as intended
• Added ms-auto (margin-start: auto) to the second <ul>: In flex containers, auto margins absorb available space, which pushes this entire group of links all the way to the right
• Fixed the icon class from fa fa-id-user to fa fa-user (that's the correct Font Awesome class for a user profile icon)

If you want to add some spacing between the Sign Up and Login links, you can add a Bootstrap gap class to the second <ul>:

<ul class="ms-auto gap-3">
  <!-- links here -->
</ul>

内容的提问来源于stack exchange，提问作者yogendra narayan