Кнопка переключения панели навигации по правому краю и элементы списка в Bootstrap 5

У меня есть простая 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>

Текущий полный просмотр страницы

введите здесь описание изображения

Текущий свернутый вид

введите здесь описание изображения


javascript html css twitter-bootstrap bootstrap-5
person Shoumik Das    schedule 21.05.2021    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Есть много способов приблизиться к этому, но я думаю, что 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 выравнивание элементов панели навигации вправо

person Zim    schedule 21.05.2021
comment
Это было идеально!! Спасибо. - person Shoumik Das; 22.05.2021

arrow_upward
0
arrow_downward

Здесь вам не хватает бренда. Включите его соответствующим образом. Ниже приведен образец для того же...

<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>
person Methuselah Rodger    schedule 25.05.2021
comment
Спасибо за предложение. - person Shoumik Das; 25.05.2021