我是 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;
}
最佳答案
您需要使用dropdown-menu-right如果您希望菜单项正确对齐，请在下拉菜单上。
不清楚的是您为什么使用切换器，因为您没有任何可折叠的菜单项( navbar-collapse )。只需删除切换器并使用 navbar-expand以便导航栏不会在移动 View 中折叠。
<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
下拉菜单将始终在移动折叠导航栏中打开，这是设计的。如果您确实想保留移动切换器，并打算添加可折叠元素，您可以使用 position-absolute关于dropdown-menu覆盖默认行为。
<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
关于html - bootstrap 4下拉菜单导航栏用户首选项 "Welcome, User"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52184565/