Значок гамбургера Bootstrap не соответствует Navbar-Brand

Я пытаюсь создать веб-сайт с помощью начальной загрузки, и при использовании компонента панели навигации я сталкиваюсь с проблемой, когда экран сжимается до установленной мной точки останова (то есть lg), выравнивание значка гамбургера нарушается, как показано ниже .

Может кто-нибудь, пожалуйста, дайте мне знать, почему это происходит и как лучше всего решить эту проблему? заранее спасибо

<html>

<head>
  <title>Johns's Portfolio</title>
  <!-- Linking custom CSS file -->
  <link rel = "stylesheet" href = "./index.css">
  <!-- Linking Bootstrap -->
  <link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous">
</head>

<body>
  <nav class = "navbar navbar-expand-lg navbar-dark bg-dark">
    <div class = "container">
      <span class = "navbar-brand fw-bold">John Doe</span>
    </div>
    <button class = "navbar-toggler ms-auto" type = "button" data-bs-toggle = "collapse" data-bs-target = "#ToggleMenu" aria-controls = "ToggleMenu" aria-expanded = "false" aria-label = "toggle navigation">
                <span class = "navbar-toggler-icon"></span>
            </button>
    <div class = "navbar-collapse collapse" id = "ToggleMenu">
      <ul class = "navbar-nav">
        <li class = "nav-item">
          <a href = "#" class = "nav-link">About</a>
        </li>
        <li class = "nav-item">
          <a href = "#" class = "nav-link">Work</a>
        </li>
        <li class = "nav-item">
          <a href = "#" class = "nav-link">Projects</a>
        </li>
        <li class = "nav-item">
          <a href = "#" class = "nav-link">Education</a>
        </li>
        <li class = "nav-item">
          <a href = "#" class = "nav-link">Testimonials</a>
        </li>
        <li class = "nav-item">
          <a href = "#" class = "nav-link">Contact</a>
        </li>
      </ul>
    </div>
  </nav>
  <!-- Bootstrap Javascript files-->
  <script src = "https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity = "sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin = "anonymous"></script>
  <script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity = "sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin = "anonymous"></script>
</body>

</html>

Я также прилагаю изображение проблемы: Значок гамбургера Bootstrap не соответствует Navbar-Brand

Почему вы не следуете документ? У них уже есть отзывчивый пример.

vee 10.04.2022 19:07

Привет, @vee, да, документ работает нормально, я просто хотел знать, почему возникает такая проблема. Спасибо

Jude Savio 10.04.2022 19:11

Потому что вы заключаете navbar-brand в container, но не navbar-toggler. Вы можете проверить это самостоятельно, внимательно прочитав его, или использовать такой инструмент, как WinMerge, или инструменты сравнения, чтобы сравнить разницу.

vee 10.04.2022 19:13
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
3
21
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Ваша проблема в том, что вы поместили кнопку за пределы container

<div class = "container">
      <span class = "navbar-brand fw-bold">John Doe</span>
    </div>
    <button class = "navbar-toggler ms-auto" type = "button" data-bs-toggle = "collapse" data-bs-target = "#ToggleMenu" aria-controls = "ToggleMenu" aria-expanded = "false" aria-label = "toggle navigation">
                <span class = "navbar-toggler-icon"></span>
            </button>

Это должно быть так

<div class = "container">
      <span class = "navbar-brand fw-bold">John Doe</span>
<button class = "navbar-toggler ms-auto" type = "button" data-bs-toggle = "collapse" data-bs-target = "#ToggleMenu" aria-controls = "ToggleMenu" aria-expanded = "false" aria-label = "toggle navigation">
                <span class = "navbar-toggler-icon"></span>
            </button>
    </div>
    

Вы можете попробовать это исправление

<html>

<head>
  <title>Johns's Portfolio</title>
  <!-- Linking custom CSS file -->
  <link rel = "stylesheet" href = "./index.css">
  <!-- Linking Bootstrap -->
  <link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous">
</head>

<body>
  <nav class = "navbar navbar-expand-lg navbar navbar-dark bg-dark">
    <div class = "container">
      <span class = "navbar-brand fw-bold">John Doe</span>
      <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"></span>
        </button>
      <div class = "collapse navbar-collapse" id = "navbarNav">
        <ul class = "navbar-nav">
          <li class = "nav-item">
            <a href = "#" class = "nav-link">About</a>
          </li>
          <li class = "nav-item">
            <a href = "#" class = "nav-link">Work</a>
          </li>
          <li class = "nav-item">
            <a href = "#" class = "nav-link">Projects</a>
          </li>
          <li class = "nav-item">
            <a href = "#" class = "nav-link">Education</a>
          </li>
          <li class = "nav-item">
            <a href = "#" class = "nav-link">Testimonials</a>
          </li>
          <li class = "nav-item">
            <a href = "#" class = "nav-link">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <!-- Bootstrap Javascript files-->
  <script src = "https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity = "sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin = "anonymous"></script>
  <script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity = "sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin = "anonymous"></script>
</body>

</html>

Спасибо, поэтому я считаю, что причина не в том, чтобы заключить все в div контейнера. Большое спасибо @Ник

Jude Savio 10.04.2022 19:13

Yuppp, я тоже только что обновил свой ответ. Вы можете проверить это. :D @JudeSavio

Nick Vu 10.04.2022 19:14

Если вы найдете это полезным, не могли бы вы помочь мне принять мой ответ? это поможет людям, у которых такая же проблема, как у вас: D @JudeSavio

Nick Vu 10.04.2022 19:24

Другие вопросы по теме