窗口缩小时如何使导航栏缩小？答案

【问题标题】：How do i make the navbar shrink when window shrinks?窗口缩小时如何使导航栏缩小？
【发布时间】：2021-10-16 01:59:12
【问题描述】：

我是网络开发新手，我正在开发家具网站。网站导航栏在正常视图下工作正常，但是当我将其最小化时，它会中断。窗口缩小时如何让导航栏缩小？

普通视图中的导航栏： Working Navbar

缩小视图中的导航栏： Broken Navbar

导航栏 HTML：

<div class="topnav">
        <ul>
            <li><a href="index.html">Oak <span style="color:green">N' </span>Oak</a></li>
            <li class="current"><a href="index.html">Home</a></li>
            <li><a href="About Us.html">About Us</a></li>
            <li><a href="Products.html">Products</a></li>
            <li><a href="Our Dealers.html">Our Dealers</a></li>
            <li><a href="Apply For Dealership.html">Apply For Dealership</a></li>
            <li><a href="Wholesale Price.html">Wholesale Price</a></li>
            <li><a href="Contact Us.html">Contact Us</a></li>
        </ul>
    </div>

导航栏 CSS：

.topnav {
    background-color: rgb(255, 255, 255);
    overflow: hidden;
    display: block;
    place-content: space-between;
  }

【问题讨论】：

只需使用 bootstrap Navbar 参见 Bootstrap Docs getbootstrap.com/docs/4.0/components/navbar
对于视口来说太大了。制作菜单的移动版本并使用@media 查询显示/隐藏它。
Start here to learn about responsive web design
参考这个解决方案：stackoverflow.com/questions/26317679/…

标签： html css web

【解决方案1】：

您应该尝试为您的导航栏使用引导 CSS。

如果是 Angular 项目，您可以使用 npm 通过运行命令将其安装到您的项目中：

npm i bootstrap

它将被添加到您的项目中。

或

如果它不是一个 Angular 项目而只是一个 html 项目，只需将 Bootstrap CSS 添加到标签中作为指向您的 html 文件的链接。您可以这样做：

<head><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous" /></head>

至于你的代码，你可以这样重写：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</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"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link href="#">Link</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

每次调整或“缩小”浏览器窗口大小时，右上角都会有一个切换按钮 (=)，您的导航栏项目将在该按钮隐藏。单击它会显示您的导航栏项目。双击将再次隐藏它。

我还看到导航栏下方有一个迷你链接（主页>>产品）。您可以使用面包屑对该部分进行排序。按照此链接了解如何在 Bootstrap 中使用面包屑：

引导面包屑：https://getbootstrap.com/docs/5.1/components/breadcrumb/

希望对你有帮助。

【讨论】：