twitter-bootstrap 如何在导航栏中制作 Bootstrap 4 全宽下拉菜单？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49659305/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a Bootstrap 4 full width dropdown in Navbar?
提问by Retros
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 pluginto it, but that didn't work. Is it considered safe practice to add more than one .navbar-collapse class to a navigation bar?
我试过向它添加 Bootstrap 的折叠插件，但这没有用。将多个 .navbar-collapse 类添加到导航栏是否被认为是安全的做法？
Or should my approach be just editing Bootstrap's dropdown? And if so, how should I do it?
或者我的方法应该只是编辑 Bootstrap 的下拉菜单？如果是这样，我该怎么做？
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>回答by Zim
Use w-100(width:100%) on the dropdown-menu, and make sure the parent .dropdownis position-staticto allow the menu to expand to full width...
使用w-100（宽度：100％）上dropdown-menu，并确保父母.dropdown是position-static允许菜单扩展到全宽...
<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
https://www.codeply.com/go/0QHWWNsMyI
Alternative, set min-width in CSS:
或者，在 CSS 中设置 min-width：
https://www.codeply.com/go/fClz4WpC8u/bootstrap-4-dropdown-width
https://www.codeply.com/go/fClz4WpC8u/bootstrap-4-dropdown-width
