悬停时Bootstrap 4水平居中的子导航
我需要帮助来修改标准Bootstrap 4下拉导航菜单的行为，以在不复制导航元素的情况下执行以下操作。
我已经能够在悬停时显示子导航项，但是无法解决以下问题。任何指导将不胜感激
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Font Awsome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://www.waterpik.com/oral-health/css/styles.css">
<link rel="stylesheet" href="style.css">
<!-- livereload script -->
<script type="text/javascript">
document.write('<script src="http://'
+ (location.host || 'localhost').split(':')[0]
+ ':35729/livereload.js?snipver=1" type="text/javascript"><\/script>')
</script>
<title>Nav Test</title>
<style type="text/css" media="screen">
#topNav .nav-link {
font-size: 0.8rem;}
.navbar-nav .nav-link {
font-size: 1.2rem;}
.dropdown-item {
font-size: 1.0rem;
}
.dropdown-toggle::after {
border: none;
color: #999;
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f0c9";
width: 1.5rem;
height: 1.5rem;
font-size: 1rem;
border: solid 1px #999;
border-radius: .25rem;
vertical-align: middle;
text-align: center;
float: right;
margin-right: 12px;
}
.dropdown-menu {
font-size: 1rem;
color: #212529;
background-color: #fff;
border: 1px solid rgba(0,0,0,.15);
border-radius: .25rem;
}
@media (min-width: 992px) {
.dropdown-menu {
left: 50%;
transform: translateX(-50%);
}
.dropdown-toggle::after {
display:none;
}
.navbar-expand-lg .navbar-nav .nav-link {
padding-right: 20px;
padding-left: 20px;
}
}
</style>
</head>
<body>
<div class="container-fluid bg-primary py-2">
<div class="row">
<div class="col">
<ul id="topNav" class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link text-white" href="#">Support</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">Registration</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">Contact Us</a>
</li>
</ul>
</div>
</div>
</div>
<nav class="navbar navbar-expand-lg navbar-light shadow ">
<div class="container">
<a class="navbar-brand" href="#">
<img src="https://via.placeholder.com/150x75.png?text=Logo+Image"></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" id="navbarSupportedContent">
<ul class="navbar-nav mx-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">
Our Products
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<div class="d-md-flex">
<a class="dropdown-item" href="#">Catagory 1</a>
<a class="dropdown-item" href="#">Catagory 2</a>
<a class="dropdown-item" href="#">Catagory 3</a>
<a class="dropdown-item" href="#">Catagory 4</a>
<a class="dropdown-item" href="#">Catagory 5</a>
</div>
</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">
The Company
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<div class="d-md-flex">
<a class="dropdown-item" href="#">Who We Are</a>
<a class="dropdown-item" href="#">What We Do</a>
<a class="dropdown-item" href="#">Why We Do It</a>
<a class="dropdown-item" href="#">Where to Find Us</a>
<a class="dropdown-item" href="#">Contact</a>
</div>
</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">
Opportunites
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<div class="d-md-flex">
<a class="dropdown-item" href="#">Opportunites Sell Our Products</a>
<a class="dropdown-item" href="#">Territories</a>
<a class="dropdown-item" href="#">Affiliates</a>
<a class="dropdown-item" href="#">Susscess Stories</a>
<a class="dropdown-item" href="#">Contact</a>
</div>
</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">
Media
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<div class="d-md-flex" >
<a class="dropdown-item" href="#">News & Press</a>
<a class="dropdown-item" href="#">Blog</a>
<a class="dropdown-item" href="#">Videos</a>
<a class="dropdown-item" href="#">Testimonials</a>
<a class="dropdown-item" href="#">Press Kit</a>
</div>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0 ">
<input class="form-control form-control-sm mr-sm-2" type="search" placeholder="Search" aria-label="Search">
</form>
</div>
</div>
</nav>
<div class="container my-3">
<div class="row">
<div class="col">
<h1>Page Title</h1>
<p>Remember how free clouds are. They just lay around in the sky all day long. These things happen automatically. All you have to do is just let them happen. There are no mistakes. You can fix anything that happens. Volunteering your time; it pays you and your whole community fantastic dividends. You create the dream - then you bring it into your world. You can do anything here - the only prerequisite is that it makes you happy. A tree needs to be your friend if you're going to paint him. Nice little clouds playing around in the sky. Pretend you're water. Just floating without any effort. Having a good day. Nature is so fantastic, enjoy it. Let it make you happy.</p>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script>
function toggleDropdown (e) {
const _d = $(e.target).closest('.dropdown'),
_m = $('.dropdown-menu', _d);
setTimeout(function(){
const shouldOpen = e.type !== 'click' && _d.is(':hover');
_m.toggleClass('show', shouldOpen);
_d.toggleClass('show', shouldOpen);
$('[data-toggle="dropdown"]', _d).attr('aria-expanded', shouldOpen);
}, e.type === 'mouseleave' ? 300 : 0);
}
$('body')
.on('mouseenter mouseleave','.dropdown',toggleDropdown)
.on('click', '.dropdown-menu a', toggleDropdown);
</script>
</body>
</html>
https://jsfiddle.net/jpmoran/94ycqdhe/#&togetherjs=PnfBLETxv6
桌面视图：
- 分配主导航项之间的间距（justify-content-between）
- 在桌面上查看时，水平显示活动页面导航的子菜单，并在主导航下居中显示。
- 在其他主导航项的鼠标悬停上切换或弹出当前子导航，在鼠标移出时恢复活动的子导航
- 允许主导航项具有可点击的网址
- 垂直扩展导航区域，以在需要时容纳子导航
移动视图：
- 在导航之前移动搜索栏
- 主要项目链接到页面
- 仅使用右列中的图标展开子项
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？