如何解决宽广的顶部导航菜单-Li不会包装
我是一个长期的开发人员，但是对Bootstrap还是陌生的。我正在为网站提供顶级导航，该网站具有6个以上的水平项目，并且下拉菜单中包含许多链接。我可以进行所有工作，但是无法用较小的屏幕包装主菜单项。不管我尝试了什么，溢出都会在屏幕外消失。谢谢。
<nav class="navbar navbar-expand-sm flex-row">
<a href="#"><img src="#" style="width: 250px; height: auto; margin: 0 3rem;" /></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><i class="fas fa-bars"></i></button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle catogary" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">WHO WE ARE</a>
<div class="dropdown-menu single" aria-labelledby="navbarDropdown">
<div class="container">
<div class="row">
<div class="col-md-12">
<ul class="nav flex-column">
<li class="nav-item"> <a class="nav-link active" href="#">Link</a> </li>
<li class="nav-item"> <a class="nav-link i" href="#">Link</a> </li>
<li class="nav-item"> <a class="nav-link i" href="#">Link</a> </li>
<li class="nav-item"> <a class="nav-link i" href="#">Link</a> </li>
<li class="nav-item"> <a class="nav-link i" href="#">Link</a> </li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle catogary" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">PRODUCTS</a>
<div class="dropdown-menu mega" aria-labelledby="navbarDropdown">
<div class="row">
<div class="col-md-3">
<ul class="nav flex-column">
<li class="nav-item"> <a class="nav-link active" href="#">Object 1</a> </li>
<li class="nav-item"> <a class="nav-link i" href="#">Item 1</a> </li>
<li class="nav-item"> <a class="nav-link i" href="#">Item 2</a> </li>
<li class="nav-item"> <a class="nav-link i" href="#">Item 3</a> </li>
</ul>
</div>
<div class="col-md-3">
<ul class="nav flex-column">
<li class="nav-item"> <a class="nav-link active" href="#">Object 2</a> </li>
<li class="nav-item"> <a class="nav-link i" href="#">Item 1</a> </li>
<li class="nav-item"> <a class="nav-link i" href="#">Item 2</a> </li>
<li class="nav-item"> <a class="nav-link i" href="#">Item 3</a> </li>
</ul>
</div>
<div class="col-md-3">
<ul class="nav flex-column">
<li class="nav-item"> <a class="nav-link active" href="#">Object 3</a> </li>
<li class="nav-item"> <a class="nav-link i" href="#">Item 1</a> </li>
<li class="nav-item"> <a class="nav-link i" href="#">Item 2</a> </li>
<li class="nav-item"> <a class="nav-link i" href="#">Item 3</a> </li>
</ul>
</div>
<div class="col-md-3">
<ul class="nav flex-column">
<li class="nav-item"> <a class="nav-link active" href="#">Object 4</a> </li>
<li class="nav-item"> <a class="nav-link i" href="#">Item 1</a> </li>
<li class="nav-item"> <a class="nav-link i" href="#">Item 2</a> </li>
<li class="nav-item"> <a class="nav-link i" href="#">Item 3</a> </li>
</ul>
</div>
</div>
</div>
</li>
<li class="nav-item"><a class="nav-link" href="#">PROJECTS</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle catogary" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">DESIGN TOOLS</a>
<div class="dropdown-menu mega" aria-labelledby="navbarDropdown">
<div class="row">
<div class="col-md-3">
<ul class="nav flex-column">
<li class="nav-item"> <a class="nav-link active" href="#">Object 1</a> </li>
<li class="nav-item"> <a class="nav-link i" href="#">Item 1</a> </li>
<li class="nav-item"> <a class="nav-link i" href="#">Item 2</a> </li>
<li class="nav-item"> <a class="nav-link i" href="#">Item 3</a> </li>
</ul>
</div>
<div class="col-md-3">
<ul class="nav flex-column">
<li class="nav-item"> <a class="nav-link active" href="#">Object 2</a> </li>
<li class="nav-item"> <a class="nav-link i" href="#">Item 1</a> </li>
<li class="nav-item"> <a class="nav-link i" href="#">Item 2</a> </li>
<li class="nav-item"> <a class="nav-link i" href="#">Item 3</a> </li>
</ul>
</div>
<div class="col-md-3">
<ul class="nav flex-column">
<li class="nav-item"> <a class="nav-link active" href="#">Object 3</a> </li>
<li class="nav-item"> <a class="nav-link i" href="#">Item 1</a> </li>
<li class="nav-item"> <a class="nav-link i" href="#">Item 2</a> </li>
<li class="nav-item"> <a class="nav-link i" href="#">Item 3</a> </li>
</ul>
</div>
<div class="col-md-3">
<ul class="nav flex-column">
<li class="nav-item"> <a class="nav-link active" href="#">Object 4</a> </li>
<li class="nav-item"> <a class="nav-link i" href="#">Item 1</a> </li>
<li class="nav-item"> <a class="nav-link i" href="#">Item 2</a> </li>
<li class="nav-item"> <a class="nav-link i" href="#">Item 3</a> </li>
</ul>
</div>
</div>
</div>
</li>
<li class="nav-item"><a class="nav-link" href="#">CATALOGS</a></li>
<li class="nav-item"><a class="nav-link" href="#">CONTACT US</a></li>
</ul>
</div>
</nav>
CodePen HTML with CSS and Script
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
