右对齐导航栏切换按钮并在 Bootstrap 5 中列出项目答案

【问题标题】：Right align navbar toggle button and list items in Bootstrap 5右对齐导航栏切换按钮并在 Bootstrap 5 中列出项目
【发布时间】：2021-05-21 14:57:07
【问题描述】：

我有一个简单的 html 页面，顶部有一个固定的导航栏。在全屏模式下查看网页时，链接居中，但当页面缩小时，它会折叠为位于左侧侧的切换按钮。我想要实现的是在页面的 right 端对齐切换按钮和下拉链接。我正在使用 Bootstrap 5 的本地副本。全屏查看页面时，我还想查看中间的链接项。

我怎样才能做到这一点？我尝试了一些选项，例如 navbar-toggler-right，但没有帮助。

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Bootstrap 5 - Test Navbar Page</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Testing Navbar">
  <meta name="keywords" content="bootstrap5,html">
  <meta name="author" content="Bootstrap 5">
  <!-- Bootstrap 5 -->
  <link rel="stylesheet" href="css/bootstrap.min.css"></link>
 </head>
 <body>
  <nav class="navbar navbar-expand-sm bg-light navbar-light fixed-top">
   <!-- Toggler/collapsibe Button -->
   <button class="navbar-toggler ms-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle Navigation">
    <span class="navbar-toggler-icon"></span>
   </button>
   <div class="navbar-collapse collapse justify-content-center" id="navbarCollapse">
    <ul class="navbar-nav ms-2">
     <li class="nav-item">
      <a class="nav-link" href="#">Resources</a>
     </li>
     <li>
      <a class="nav-link" href="#">Contact</a>
     </li>
     <li>
      <a class="nav-link" href="#">Login</a>
     </li>
     <li>
      <form action="#">
       <input type="submit" class="btn btn-warning" value="Register">
      </form>
     </li>
    </ul>
   </div>
  </nav>
  <!-- Bootstrap 5 -->
  <script src="js/bootstrap.bundle.min.js"></script>
 </body>
</html>

当前的完整页面视图

当前折叠视图

【问题讨论】：

标签： javascript html css twitter-bootstrap bootstrap-5

【解决方案1】：

有很多方法可以解决这个问题，但我认为align-items-end 是最简单的。另外，请确保您使用的是容器。

<nav class="navbar navbar-expand-sm bg-light navbar-light fixed-top">
    <!-- Toggler/collapsibe Button -->
    <div class="container-fluid">
        <button class="navbar-toggler ms-auto ms-sm-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle Navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="navbar-collapse collapse justify-content-center" id="navbarCollapse">
            <ul class="navbar-nav ms-2 align-items-end">
                <li class="nav-item">
                    <a class="nav-link" href="#">Resources</a>
                </li>
                <li>
                    <a class="nav-link" href="#">Contact</a>
                </li>
                <li>
                    <a class="nav-link" href="#">Login</a>
                </li>
                <li>
                    <form action="#">
                        <input type="submit" class="btn btn-warning" value="Register">
                    </form>
                </li>
            </ul>
        </div>
    </div>
</nav>

Demo

另见：Bootstrap 5 navbar align items right

【讨论】：

太完美了！！谢谢。

【解决方案2】：

在这里，您缺少品牌。适当地包括它。以下是相同的示例...

<nav class="navbar navbar-expand-sm bg-light navbar-light fixeds-top">
    <div class="container">
<!-- Include this brand section -->
         <a class="navbar-brand" href="lorem.php">
            <img src="../images/icon.png" alt="" width="30" height="30" class="d-inline-block align-top">
            Brand
        </a>
       
   <button class="navbar-toggler ms-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle Navigation">
    <span class="navbar-toggler-icon"></span>
   </button>
   <div class="navbar-collapse collapse justify-content-center" id="navbarCollapse">
<!-- code here -->
</div>

【讨论】：

感谢您的建议。