导航栏菜单在小屏幕上不垂直对齐和汉堡菜单的位置
Posted
技术标签:
【中文标题】导航栏菜单在小屏幕上不垂直对齐和汉堡菜单的位置【英文标题】：The navbar menu doesn't vertically aligned on small screen and the position of hamburger menu 【发布时间】：2021-07-12 12:33:43 【问题描述】：我的顶部菜单和子菜单在正常屏幕上看起来很好。当缩小到更小的尺寸时，我希望菜单/子菜单垂直对齐，就像引导程序的正常下拉菜单一样。这不会发生，如下所示。如何在小屏幕上垂直对齐显示下拉列表（菜单和子菜单）？
TIA
截图
代码
<nav class="navbar navbar-expand-md navbar-dark ">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#menubar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse" id="menubar">
<ul class="nav navbar-nav">
<li class="nav-item ">
<a class="nav-link" href="#">Menu1</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">Menu2</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Submenu1</a></li>
<li><a href="#">Submenu2</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">Menu3</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Submenu3</a></li>
<li><a href="#">Submenu4</a></li>
</ul>
</li>
</ul>
</div>
</nav>
@media (max-width: 767px)
.navbar-collapse
background-color: #565149;
.banner-navbar,
.banner-search
display: none;
#menubar ul
height: 44px;
padding-top: 5px;
#menubar .nav-link
font-size: 14px;
padding: 8px 50px 0 0 !important;
color: white !important;
#menubar .nav-link:focus,
#menubar .nav-link:hover,
#menubar .nav-link:visited
color: white !important;
#menubar .navbar
padding-left: 0 !important;
.navbar.navbar-dark
height: 44px;
margin: 0 15%;
nav.navbar .navbar-nav li.nav-item.active:after
content: "";
position: relative;
margin-left: -31px;
left: 50%;
bottom: 15px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid white;
/*submenu*/
#menubar li.dropdown.show
position: static;
#menubar li.dropdown.show .dropdown-menu
display: table;
width: 100%;
text-align: center;
left: 0;
right: 0;
margin: 0;
.dropdown-menu > li
display: table-cell;
padding-top: 6px;
.dropdown-menu > li a
font-weight:600;
.dropdown-menu > li a:hover
text-decoration: none;
更新： 对 Rich 的解决方案稍作修改。对我来说有两个问题：
-
不知何故，搜索框和右侧小导航栏离屏幕中间太近了。应该向右浮动。
搜索关键词的输入应该加倍宽度（或多或少），但我不想给它一个固定的像素。我怎样才能做到这一点？
谢谢
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<style>
.open > ul
display: inline-flex !important;
.bg-banner
background-image: linear-gradient(#17517f, #46769d);
.bg-headbar
background-color: #005db9;
#menubar .nav-link
font-size: 14px;
padding-right: 50px;
color: white;
nav.navbar .navbar-nav li.nav-item.active:after
content: "";
position: relative;
margin-left: -31px;
left: 50%;
bottom: 15px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid white;
#menubar li.dropdown.show
position: static;
#menubar li.dropdown.show .dropdown-menu
display: table;
width: 100%;
text-align: center;
left: 0;
right: 0;
margin: 0;
.dropdown-menu > li
display: table-cell;
padding-top: 6px;
.dropdown-menu > li a
font-weight: 600;
.dropdown-menu > li a:hover
text-decoration: none;
</style>
<nav class="navbar navbar-expand-md navbar-dark text-white bg-banner">
<a class="navbar-brand" href="#">Test Site</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 navbarSupportedContent">
<form class="form-inline my-2 .m-md-0 ml-auto">
<div class="input-group">
<input type="text" class="form-control form-control-sm" placeholder="Seach">
<div class="input-group-append">
<button class="btn btn-outline-light btn-sm" type="button"><i class="fa fa-search"></i></button>
</div>
</div>
</form>
</div>
<div class="banner-navbar collapse navbar-collapse navbarSupportedContent">
<nav class="navbar navbar-expand-sm navbar-light">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" role="button" href="#">
<i class="fa fa-user"></i>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Sign Out</a>
</div>
</li>
<li class="nav-item">
<a href="#" class="nav-link pl-2"><i class="fa fa-cog"></i></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" role="button" href="#">
<i class="fa fa-question-circle"></i>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#"> Help</a>
</div>
</li>
</ul>
</nav>
</div>
</nav>
<nav class="navbar navbar-expand-md navbar-dark text-white bg-headbar py-0 py-8-md">
<div class="collapse navbar-collapse navbarSupportedContent" id="menubar">
<ul class="navbar-nav mr-auto">
<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">
Menu1
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Home<span class="sr-only"> (current)</span></a>
<a class="dropdown-item" href="#">Submenu 1B</a>
</div>
</li>
<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">
Menu2
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Submenu 2A</a>
<a class="dropdown-item" href="#">Submenu 2B</a>
</div>
</li>
<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">
Menu3
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Submenu 3A</a>
<a class="dropdown-item" href="#">Submenu 3B</a>
</div>
</li>
</ul>
</div>
</nav>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, blanditiis eaque? Vero consequuntur tempora vitae at maxime, repellendus excepturi quia quibusdam odit sed ullam praesentium natus rerum molestiae cupiditate possimus?
</p>
<script type="text/javascript">
$("#menubar li.dropdown").hover(function ()
$(this).addClass("active show");
,
function ()
$(this).removeClass("active show");
);
$("#menubar ul.dropdown-menu>li>a").on("click", function (e)
$("#menubar li.dropdown").removeClass("active show");
);
</script>【问题讨论】：
【参考方案1】：您不必执行任何操作，因为对于小屏幕，navbar-nav ul 通常设置为 flex-direction: column，并且在导航栏 (.navbar-expand-md .navbar-nav) 中设置的断点处切换为 flex-direction: row。
您没有通过 *** sn-p 工具提供代码的工作版本，而且我无法轻松地让您的代码在本地运行，因此不清楚为什么您的代码没有按照您的意愿运行。
我确实整理了您的代码的替代版本，可能会对您有所帮助。我不确定您在考虑如何通过 active 类向用户指示他们的位置，但这应该很容易添加。
更新
我已修改我的答案，包括您使用 JavaScript 添加 active show 以显示下拉菜单，并将小菜单向右移动。
我修复了原始版本中的 ARIA 标签问题。我复制了代码，但忽略了给 ARIA 标签一个唯一的 ID。
更新 2
为防止每次用户将鼠标悬停在菜单栏上时内容向下移动，您可以为内容添加一个负的上边距，以将其向上移动与菜单栏展开的量相同。菜单栏需要一个 z-index 值才能将其移动到内容上。
$("#menubar li.dropdown").hover(function ()
$(this).addClass("active show");
$("#firstContent").addClass("mt-n15");
,
function ()
$(this).removeClass("active show");
$("#firstContent").removeClass("mt-n15");
);
$("#menubar ul.dropdown-menu>li>a").on("click", function (e)
$("#menubar li.dropdown").removeClass("active show");
$("#firstContent").removeClass("mt-n15");
);<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<style>
.open>ul /* mine */
display: inline-flex !important;
.bg-banner /* mine */
background-image: linear-gradient(#17517f, #46769d);
.bg-headbar /* mine */
background-color: #005db9;
#menubar .nav-link
font-size: 14px;
padding-right: 50px;
color: white;
@media (min-width:768px)
nav.navbar .navbar-nav li.nav-item.active:after
content: "";
position: relative;
margin-left: -31px;
left: 50%;
bottom: 15px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid white;
#menubar li.dropdown.show
position: static;
#menubar li.dropdown.show .dropdown-menu
display: table;
width: 100%;
text-align: center;
left: 0;
right: 0;
margin: 0;
.dropdown-menu>li
display: table-cell;
padding-top: 6px;
.dropdown-menu>li a
font-weight: 600;
.dropdown-menu>li a:hover
text-decoration: none;
.mt-n15
margin-top: -1.5rem;
</style>
<nav class="navbar navbar-expand-md navbar-dark text-white bg-banner">
<a class="navbar-brand" href="#">Test Site</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbarSupportedContent" aria-controls="navbarSearchContent navbarHelpContent menubar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse navbarSupportedContent" id="navbarSearchContent">
<form class="form-inline my-2 .m-md-0 ml-auto">
<div class="input-group">
<input type="text" class="form-control form-control-sm" placeholder="Seach" size="40">
<div class="input-group-append">
<button class="btn btn-outline-light btn-sm" type="button"><i class="fa fa-search"></i></button>
</div>
</div>
</form>
</div>
<div class="banner-navbar collapse navbar-collapse flex-grow-0 navbarSupportedContent" id="navbarHelpContent">
<nav class="navbar navbar-expand-sm navbar-light">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" role="button" href="#">
<i class="fa fa-user"></i>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Sign Out</a>
</div>
</li>
<li class="nav-item">
<a href="#" class="nav-link pl-2"><i class="fa fa-cog"></i></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" role="button" href="#">
<i class="fa fa-question-circle"></i>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Help</a>
</div>
</li>
</ul>
</nav>
</div>
</nav>
<nav class="navbar navbar-expand-md navbar-dark text-white bg-headbar py-0 py-8-md" style="z-index: 1;">
<div class="collapse navbar-collapse navbarSupportedContent" id="menubar">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Menu1
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown1">
<a class="dropdown-item" href="#">Home<span class="sr-only"> (current)</span></a>
<a class="dropdown-item" href="#">Submenu 1B</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Menu2
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown2">
<a class="dropdown-item" href="#">Submenu 2A</a>
<a class="dropdown-item" href="#">Submenu 2B</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown3" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Menu3
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown3">
<a class="dropdown-item" href="#">Submenu 3A</a>
<a class="dropdown-item" href="#">Submenu 3B</a>
</div>
</li>
</ul>
</div>
</nav>
<div id="firstContent" class="container">
<div class="row">
<div class="col-12 col-sm-6">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, blanditiis eaque? Vero consequuntur tempora vitae at maxime, repellendus excepturi quia quibusdam odit sed ullam praesentium natus rerum molestiae cupiditate possimus?
</div>
<div class="col-12 col-sm-6">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, blanditiis eaque? Vero consequuntur tempora vitae at maxime, repellendus excepturi quia quibusdam odit sed ullam praesentium natus rerum molestiae cupiditate possimus?
</div>
</div>
</div>【讨论】：
感谢您回答我的问题。我在做别的事情，很快就会尝试你的建议。 刚刚更新了我原来的问题。谢谢！ 太棒了！感谢您的帮助！ 请帮忙。悬停时添加三角指针，如何保持菜单栏高度不展开？ 有了指针，必须有更多的高度。您可以通过将高度定义为 3.8125rem 并将align-self-start 添加到 #menubar 使其始终保持在顶部，从而使导航栏始终更高。如果您试图在子菜单打开时阻止内容移动，您可以将内容向上移动，因为指针展开菜单栏 (1.5rem)。我已经修改了我的答案，所以菜单会扩展，但内容保持在相同的位置。 另外一个注意事项 - 您的悬停方案不适用于平板电脑用户 - 您可能希望使用单击打开子菜单而不是悬停。以上是关于导航栏菜单在小屏幕上不垂直对齐和汉堡菜单的位置的主要内容，如果未能解决你的问题，请参考以下文章