如何在导航栏中制作 Bootstrap 4 全宽下拉菜单?
[英] How to make a Bootstrap 4 full width dropdown in Navbar?
本文介绍了如何在导航栏中制作 Bootstrap 4 全宽下拉菜单?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试制作一个看起来像折叠项的全角下拉菜单 - 网站现在经常使用的全角可折叠导航.但我不知道该怎么做.
我尝试将 Bootstrap 的
这是我的代码的大纲,请查看全宽:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"><script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5Kkn"cross/脚本><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7xfakfakvskin匿名"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjPVCUar5"7xSfFWpi1MquVdAyjPVCUar5<6/脚本><nav class="navbar navbar-expand-lg"><a class="navbar-brand" href="#" style="color: red;">LOGO在这里</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle导航"><span class="navbar-toggler-icon"></span>按钮><div class="collapse navbar-collapse" id="navbarSupportedContent"><ul class="navbar-nav"><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">落下</a><div class="下拉菜单" aria-labelledby="navbarDropdown"><a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">另一个动作</a><div class="dropdown-divider"></div><a class="dropdown-item" href="#">这里还有别的东西</a>
</nav>
解决方案
使用 w-100
(width:100%) on the dropdown-menu
,并确保父 .dropdown
是 position-static
允许菜单扩展到全宽...
<a class="navbar-brand" href="#" style="color: red;">LOGO在这里</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle导航"><span class="navbar-toggler-icon"></span>按钮><div class="collapse navbar-collapse" id="navbarSupportedContent"><ul class="navbar-nav"><li class="nav-item dropdown position-static"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">落下</a><div class="下拉菜单 w-100" aria-labelledby="navbarDropdown"><a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">另一个动作</a><div class="dropdown-divider"></div><a class="dropdown-item" href="#">这里还有别的东西</a>
</nav>
https://www.codeply.com/go/0QHWWNsMyI
替代方法,在 CSS 中设置 min-width:
https://www.codeply.com/go/fClz4WpC8u/bootstrap-4-dropdown-width
复杂的超级菜单"示例
I'm trying to make a full-width dropdown that looks like a collapse item - the full-width collapsable navigations that websites now use often. But I cannot figure out how to do it.
I've tried adding Bootstrap's collapse plugin to it, but that didn't work. Is it considered safe practice to add more than one .navbar-collapse class to a navigation bar?
Or should my approach be just editing Bootstrap's dropdown? And if so, how should I do it?
Here's an image to show you exactly what I'm trying to achieve:
And here's the outline of my code, please view snipped in full width:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#" style="color: red;">LOGO GOES HERE</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</div>
</nav>
解决方案
Use w-100
(width:100%) on the dropdown-menu
, and make sure the parent .dropdown
is position-static
to allow the menu to expand to full width...
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#" style="color: red;">LOGO GOES HERE</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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">
<li class="nav-item dropdown position-static">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu w-100" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
https://www.codeply.com/go/0QHWWNsMyI
Alternative, set min-width in CSS:
https://www.codeply.com/go/fClz4WpC8u/bootstrap-4-dropdown-width
Complex "mega menu" example
这篇关于如何在导航栏中制作 Bootstrap 4 全宽下拉菜单?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!