Блог

Главная - Вопросы по программированию - Как я могу переместить это меню навигационной панели в правую сторону?

Как я могу переместить это меню навигационной панели в правую сторону?

#javascript #html #css #twitter-bootstrap

Вопрос:

Как я могу переместить это меню навигационной панели в правую сторону ?

Я не могу переместить это меню навигационной панели с правой стороны. Я попробовал правильный метод. каким будет лучшее решение ?

Я перепробовал много способов, но пока безрезультатно, не могли бы вы, к счастью, помочь решить мою проблему!

Вот мой код

     <html>

    <head>

        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"
            integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">

        <title>TechSite</title>

        <style>
            .navbar-brand{
                font-size: 2rem;
            }
            ul.navbar-nav {
               font-size: 1.15rem;
            }
            .nav-link {
                padding: .3rem 1rem;
                color: white;
            }

            .nav-link:hover {
                color: white;
            }

            button.navbar-toggler {
                color: white;
            }

            p {
                color: gray;
            }
        </style>

    </head>

    <body>

        <!-- navbar -->

        <nav class="navbar navbar-expand-lg  bg-dark fixed-top">

            <div class="container-fluid">

                <a class="navbar-brand" href="#" style="color: red;">
                    TechSite
                </a>

                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                    aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon" style="color: white;"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav float-end">
                        <li class="nav-item">
                            <a class="nav-link active rounded" aria-current="page" href="#"
                                style="color: rgb(173, 173, 173);border: 1px solid wheat;">
                                Home
                            </a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                                data-bs-toggle="dropdown" aria-expanded="false">
                                Services
                            </a>
                            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                                <li><a class="dropdown-item" href="#">App Development</a></li>
                                <li><a class="dropdown-item" href="#">Game Development</a></li>
                                <li><a class="dropdown-item" href="#">Web Development</a></li>
                            </ul>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#" style="color: white;">About</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#" style="color: white;">Contact</a>
                        </li>
                    </ul>
                </div>

            </div>

        </nav>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
        crossorigin="anonymous"></script>

    </body>

    </html>

Не лучше ли использовать Bootstrap 5 для решения этой проблемы?

Ответ №1:

В системе flex вы даете контейнеру navbar-collapse класс justify-content-center , и ваше меню опций будет выровнено по правой стороне.

Обновите свой HTML — код следующим образом

 <nav class="navbar navbar-expand-lg  bg-dark fixed-top">

  <div class="container-fluid">

      <a class="navbar-brand" href="#" style="color: red;">
          TechSite
      </a>

      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
          aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon" style="color: white;"></span>
      </button>

      <div class="collapse navbar-collapse justify-content-center" id="navbarNav">
          <ul class="navbar-nav float-end">
            <li class="nav-item">
              <a class="nav-link active rounded" aria-current="page" href="#"
                  style="color: rgb(173, 173, 173);border: 1px solid wheat;">
                  Home
              </a>
          </li>
              <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                      data-bs-toggle="dropdown" aria-expanded="false">
                      Services
                  </a>
                  <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                      <li><a class="dropdown-item" href="#">App Development</a></li>
                      <li><a class="dropdown-item" href="#">Game Development</a></li>
                      <li><a class="dropdown-item" href="#">Web Development</a></li>
                  </ul>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="#" style="color: white;">About</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="#" style="color: white;">Contact</a>
              </li>
              
          </ul>
      </div>

  </div>

</nav>
Метки: