右對齊導航欄切換按鈕並在 Bootstrap 5 中列出項目

Question

我有一個簡單的 html 頁面，頂部有一個固定的導航欄。 當以全屏模式查看網頁時，鏈接居中，但當頁面尺寸減小時，它會折疊為位於左側的切換按鈕。 我想要實現的是對齊切換按鈕和頁面右端的下拉鏈接。 我正在使用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>

當前整頁視圖

當前折疊視圖

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

演示

另請參閱： Bootstrap 5 navbar align items right

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

右對齊導航欄切換按鈕並在 Bootstrap 5 中列出項目

問題描述

2 個解決方案

解決方案1
2 已采納 2021-05-21 15:02:22

解決方案2
0 2021-05-25 14:34:47

右對齊導航欄切換按鈕並在 Bootstrap 5 中列出項目

問題描述

2 個解決方案

解決方案1 2 已采納 2021-05-21 15:02:22

解決方案2 0 2021-05-25 14:34:47

解決方案1
2 已采納 2021-05-21 15:02:22

解決方案2
0 2021-05-25 14:34:47