引导程序 4 下拉菜单导航栏用户首选项 "Welcome, User"

我是 css 和引导程序的新手，不知道如何解决这个问题。欢迎任何帮助。

我的代码有两个问题。

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，导航栏就不会在移动视图中折叠。

<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

相关：引导 4 导航栏下拉菜单项右侧

对于移动下拉列表的问题，您也可以使用它将其绝对定位在移动视图中：

.navbar-nav .dropdown-menu {
position: absolute;
}

对于下拉列表的对齐方式，只需将类dropdown-menu-right添加到您的dropdown-menu。

请参阅下面的演示(我已经给出了!important来处理代码片段中的级联顺序(并在此处工作小提琴：

.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>

相关内容

最新更新

热门标签：