窗口缩小时如何使导航栏缩小？
Posted
技术标签:
【中文标题】窗口缩小时如何使导航栏缩小？【英文标题】：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 参考这个解决方案：***.com/questions/26317679/… 【参考方案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/
希望对你有帮助。
【讨论】：
以上是关于窗口缩小时如何使导航栏缩小？的主要内容，如果未能解决你的问题，请参考以下文章
如何在调整大小时阻止导航栏换行到第二行，比如 FB 导航栏？
UINavigationController 导航栏在横向模式下不会缩小