bootstrap 4下拉菜单导航栏用户首选项"Welcome，User" [英] bootstrap 4 dropdown menu navbar user preferences "Welcome, User"
问题描述
我是CSS和Bootstrap的新手，不知道如何解决此问题.欢迎任何帮助.
I'm newbie to css and bootstrap and can not figure out how to solve this. Any help are welcome.
我的代码有两个问题.
1)当我在小屏幕(移动设备)上单击欢迎使用，用户"菜单时，下拉菜单在导航栏内打开，扭曲了该栏并更改了其高度.我希望它的行为与在大屏幕上(例如，台式机)相同.当我单击时，我希望它不更改导航栏就打开菜单项，位于导航栏的前面而不是内部.
1) When I click on the 'Welcome, User' menu in small screens (mobile), the dropdown menu opens inside the navigation bar, distorting the bar and changing its height. I want it to behave in the same way as on larger screens (desktops, for example). When I click, I want it to open the menu items without changing the navigation bar, in front of the navigation bar but not inside.
2)另一个问题:即使在较大的屏幕上，我也看不到菜单项.项目的某些文本隐藏在屏幕边缘.我希望菜单完全显示在屏幕上，无论是台式机还是手机.
2) Another problem: even on larger screens, I can not see the menu items completely. Some of the text of the items is hidden at the edge of the screen. I would like the menu to appear completely on the screen, no matter if it is desktop or mobile.
为清楚起见，我录制了一个非常小的视频，演示了该问题: https://puu.sh/Bq34w/ac56908be0.mp4
To make it clear, I record a very small video demonstrating the problem: 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.
You need to use dropdown-menu-right on the dropdown if you want the menu items properly aligned.
目前尚不清楚为什么要使用切换器，因为您没有可折叠的菜单项(navbar-collapse).只需移除切换器并使用navbar-expand，以便导航栏不会在移动视图中折叠.
What's not clear is why you're using the toggler, because you don't have any collapsible menu items (navbar-collapse). Just remove the toggler and use navbar-expand so that the Navbar doesn't collapse in the mobile 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
下拉菜单将始终在移动折叠的Navbar(这是设计使然)内部打开.如果您确实希望保留移动切换器并打算添加可折叠项，则可以使用dropdown-menu上的position-absolute覆盖默认行为.
The dropdown will always open inside the mobile collapsed Navbar which is by-design. If you do want to keep the mobile toggler, and intend to add collapsible items, you can use position-absolute on the dropdown-menu to override the default behavior.
<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下拉菜单导航栏用户首选项"Welcome，User"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
