引导4下拉菜单推到导航栏下弹出
引导4下拉菜单推到导航栏下弹出
提问于 2019-12-11 20:38:43
我正在使用引导4，并已经实现了一个肚脐与下拉菜单。然而，我想有下拉菜单就在肚脐下面，而不是在下拉链接下面的地方。因此，我将属性top从100%更改为自定义值，以便将下拉菜单进一步向下推(将其对齐到导航条的末尾，就在导航条下面)。也许你们有一个更好的解决方案来做这个，而不是输入一个自定义的值。
由于这一变化，我的菜单正在消失，每次我想要滑动从菜单链接到下拉菜单，因为我的菜单只显示在悬停而不是点击！它正在消失，因为鼠标已经不在下拉菜单中了，你可以在这两张图片中看到。对如何解决这个问题有什么建议吗？
到目前为止，我的导航栏(，为了查看问题，您必须查看桌面版本！)：
.navbar-brand p {
width: auto;
max-width: 170px;
height: 47px;
}
.navbar {
padding: .25rem 1rem;
}
.nav-item {
padding: 0px 10px;
}
.navbar .nav-item:first-child {
padding-left: 0px;
}
.nav-item:last-child {
padding-right: 0px;
}
.burger-menu {
justify-content: right;
}
.dropdown-menu {
left: unset !important;
min-width: 300px !important;
top: 3.1rem !important;
}
.dropdown:hover > .dropdown-menu {
display: block;
}
.dropdown > .dropdown-toggle:active {
pointer-events: none;
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<div class="container">
<div class="d-flex flex-grow-1">
<span class="w-100 d-lg-none d-block"><!-- hidden spacer to center brand on mobile --></span>
<a class="navbar-brand" href="#">
<p>My Image</p>
</a>
<div class="w-100 d-flex burger-menu">
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#myNavbar7" aria-expanded="false">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
<div class="navbar-collapse flex-grow-1 collapse" id="myNavbar7" style="">
<ul class="navbar-nav ml-auto flex-nowrap">
<li class="nav-item">
<a href="#" class="nav-link">Link1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Link2</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Link3</a>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Menu</a>
<div class="dropdown-menu">
<div class="row">
<div class="col-xl-12">
<a href="" class="nav-link">All Categories</a>
</div>
<div class="col-xl-6">
<a href="#" class="dropdown-item">link</a>
<a href="#" class="dropdown-item">link</a>
<a href="#" class="dropdown-item">link</a>
<a href="#" class="dropdown-item">link</a>
</div>
<div class="col-xl-6">
<a href="#" class="dropdown-item">link</a>
<a href="#" class="dropdown-item">link</a>
<a href="#" class="dropdown-item">link</a>
<a href="#" class="dropdown-item">link</a>
</div>
</div>
</div>
</li>
<li class="nav-item">
<form>
<div class="input-group">
<input type="text" class="form-control border border-right-0" placeholder="Search...">
<span class="input-group-append">
<button class="btn btn-outline-dark border border-left-0" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</form>
</li>
<li class="nav-item">
<a href="#" class="btn btn-secondary">Login</a>
</li>
<li class="nav-item">
<a href="#" class="btn btn-primary">Register</a>
</li>
</ul>
</div>
</div>
</nav>
Stack Overflow用户
发布于 2019-12-13 18:29:48
您必须从.navbar中删除填充，从.下拉菜单中移除边距顶，但是如果您试图使悬停效果，只对桌面大小这样做。像这样使用媒体查询
/* ============ desktop view ============ */
@media all and (min-width: 992px) {
.navbar .nav-item .dropdown-menu{ display: none; }
.navbar .nav-item:hover .nav-link{ color: #fff; }
.navbar .nav-item:hover .dropdown-menu{ display: block; }
.navbar .nav-item .dropdown-menu{ margin-top:0; }
}
/* ============ desktop view .end// ============ */下面是关于引导导航条的详细教程：https://bootstrap-menu.com/detail-basic-hover.html
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59293729
复制相关文章
相似问题
腾讯云开发者
