Question

我正在为一个网站制作导航栏，我想将标题和链接移动到导航栏的末尾。此外，当我缩短网站的宽度时，汉堡按钮会出现，但不会显示链接，也不会正确对齐。我正在使用HTML和引导程序

This is how it looks on desktop : Screenshort of the page on desktop

and this is how it looks on mobile and tablets : enter image description here

任何帮助都将不胜感激！

这是我当前的代码。注意：我已经链接了head标记中的Bootstrap CSS文件和/body标签之前的script。

<div class="container">
      <nav class="navbar navbar-expand-lg">
        <div class="container">
          <header
            class="d-flex flex-wrap justify-content-center align-items-center py-3">
            <h2>
              <a href="/" class="text-decoration-none link-dark">CAFÉ - 82</a>
            </h2>
          </header>
          <button
            class="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent"
            aria-expanded="false"
            aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="#navbarSupportedContent">
            <ul class="navbar-nav pb-2">
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">Menu</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">About</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Contact</a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </div>

Answer 1

对于给定的样品，校准是不可重复的。但是，汉堡在单击时不会显示菜单，因为id值中有一个标签/pound/#。

<div class="collapse navbar-collapse" id="#navbarSupportedContent">

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>

<div class="container">
  <nav class="navbar navbar-expand-lg">
    <div class="container">
      <header
        class="d-flex flex-wrap justify-content-center align-items-center py-3">
        <h2>
          <a href="/" class="text-decoration-none link-dark">CAFÉ - 82</a>
        </h2>
      </header>
      <button
        class="navbar-toggler"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent"
        aria-expanded="false"
        aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav pb-2">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Menu</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</div>

友情链接