bootstrap 4下拉菜单导航栏用户首选项“欢迎，用户”
Posted
技术标签:
【中文标题】bootstrap 4下拉菜单导航栏用户首选项“欢迎，用户”【英文标题】：bootstrap 4 dropdown menu navbar user preferences "Welcome, User" 【发布时间】：2019-02-10 13:34:49 【问题描述】：我是 css 和 bootstrap 的新手，不知道如何解决这个问题。欢迎任何帮助。
我的代码有两个问题。
1) 当我在小屏幕（移动设备）中单击“欢迎，用户”菜单时，下拉菜单会在导航栏内打开，使栏变形并改变其高度。我希望它的行为方式与大屏幕（例如台式机）相同。当我点击时，我希望它在不改变导航栏的情况下打开菜单项，在导航栏的前面而不是在里面。
2) 另一个问题：即使在更大的屏幕上，我也无法完全看到菜单项。某些项目的文本隐藏在屏幕边缘。我希望菜单完全显示在屏幕上，无论是桌面版还是移动版。
为了清楚起见，我录制了一个非常小的视频来演示该问题： https://puu.sh/Bq34w/ac56908be0.mp4
完整代码： https://jsfiddle.net/fredslz/0v7qwjdm/12/
<!doctype html>
<html lang="en">
<body class="text-center">
<nav class="navbar navbar-expand-md navbar-light fixed-top" style="background-color: #FFFFFF;">
<button class="navbar-toggler navbar-nav mr-auto" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand mx-auto" href="#">My Brand</a>
<ul class="nav navbar-nav ml-md--auto">
<li class="dropdown">
<a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" data-toggle="dropdown" aria-expanded="false">
Welcome, User <b class="caret"></b>
</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>
</ul>
</nav>
</body>
</html>
还有 CSS：
.navbar
-webkit-box-shadow: 0 8px 6px -6px #999;
-moz-box-shadow: 0 8px 6px -6px #999;
box-shadow: 0 8px 6px -6px #999;
【问题讨论】：
【参考方案1】：如果您希望菜单项正确对齐，您需要在下拉菜单中使用dropdown-menu-right。
尚不清楚您为什么要使用切换器，因为您没有任何可折叠的菜单项 (navbar-collapse)。只需移除切换器并使用navbar-expand，这样导航栏就不会在移动视图中折叠。
<nav class="navbar navbar-expand navbar-light fixed-top" style="background-color: #FFFFFF;">
<a class="navbar-brand mx-auto" href="#">My Brand</a>
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" data-toggle="dropdown" aria-expanded="false">
Welcome, User <b class="caret"></b>
</a>
<div class="dropdown-menu dropdown-menu-right">
<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>
</nav>
https://www.codeply.com/go/j1HZLEdyrC
下拉菜单将始终在设计的移动折叠导航栏中打开。如果您确实想保留移动切换器，并打算添加可折叠项目，您可以使用 dropdown-menu 上的 position-absolute 来覆盖默认行为。
<nav class="navbar navbar-expand-md navbar-light" style="background-color: #FFFFFF;">
<button class="navbar-toggler navbar-nav mr-auto" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand mx-auto" href="#">My Brand</a>
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" data-toggle="dropdown" aria-expanded="false">
Welcome, User <b class="caret"></b>
</a>
<div class="dropdown-menu dropdown-menu-right position-absolute" 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>
</nav>
两个选项的演示：https://www.codeply.com/go/j1HZLEdyrC
相关：Bootstrap 4 Navbar Dropdown Menu Items Right
【讨论】：
完美，非常感谢。您首先回答，因为您是公认的解决方案。我喜欢你的解决方案，因为我只是添加类，我不需要对我的 css 文件进行任何更改。【参考方案2】：对于移动下拉菜单的问题，您也可以使用它在移动视图中定位它：
.navbar-nav .dropdown-menu
position: absolute;
对于下拉菜单的对齐方式，只需将 dropdown-menu-right 类添加到您的 dropdown-menu。
见下面的demo（我已经给!important处理sn-p中的级联顺序）和working fiddle here：
.navbar
-webkit-box-shadow: 0 8px 6px -6px #999;
-moz-box-shadow: 0 8px 6px -6px #999;
box-shadow: 0 8px 6px -6px #999;
/* the rest of your styling */
.navbar-nav .dropdown-menu
position: absolute !important;
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-md navbar-light fixed-top" style="background-color: #FFFFFF;">
<button class="navbar-toggler navbar-nav mr-auto" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand mx-auto" href="#">My Brand</a>
<ul class="nav navbar-nav ml-md--auto">
<li class="dropdown">
<a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" data-toggle="dropdown" aria-expanded="false">
Welcome, User <b class="caret"></b>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<!-- ADDED CLASS -->
<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>
</nav>【讨论】：
你的回答也是对的，但是当我看到你的回答时，我已经在测试第一个回答的人提供的代码了。以上是关于bootstrap 4下拉菜单导航栏用户首选项“欢迎，用户”的主要内容，如果未能解决你的问题，请参考以下文章
当用户在菜单外单击时，如何关闭 Bootstrap 导航栏下拉菜单？
导航栏下拉菜单不适用于 Angular 和 Bootstrap 4