css - 将 Bootstrap 4.5 子菜单与左侧父菜单对齐
问题描述
我正在尝试在所有父菜单下方对齐子菜单并与左父菜单对齐。
请注意我不想对齐父菜单下方的子菜单，我想对齐绘画菜单下方的子菜单
即使使用绝对位置和变换，我目前也无法达到我的要求
我的代码（css/html）如下：
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
@media (min-width: 768px) {
.nav li {
display: block;
transition-duration: 0.5s;
}
}
@media (min-width: 768px) {
li:hover {
background: #ffffff;
cursor: pointer;
}
}
@media (min-width: 768px) {
ul.nav li ul.multi-column {
visibility: hidden;
opacity: 0;
position: absolute;
transition: all 0.5s ease;
margin-top: 1.1rem;
left: 0;
display: none;
}
}
@media (min-width: 768px) {
ul.nav li:hover > ul.multi-column, ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}
}
@media (min-width: 768px) {
ul.nav li ul.multi-column li {
clear: both;
width: 100%;
}
}
@media (min-width: 768px) {
.multi-column {
border: 1px solid black;
border-top: 0;
background-color: #ffffff!important;
margin-top: 0!important;
width: 500px;
}
}
@media (min-width: 768px) {
.multi-column-dropdown {
/*margin: 0;*/
padding: 0 0 0 5px;
}
}
.dropdown-menu-centre {
right: auto!important;
left: auto!important;
/*-webkit-transform: translate(0, 0);*/
/*transform: translate(0, 0);*/
background-color: green!important;
}
.dropdown-menu-last {
right: auto;
left: -85%;
-webkit-transform: translate(-85%, 0);
transform: translate(-85%, 0);
}
</style>
</head>
<body>
<nav class="navbar navbar-light navbar-expand-md navigation-clean">
<div class="container">
<button data-toggle="collapse" class="navbar-toggler" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navcol-1">
<ul class="nav navbar-nav mx-auto">
<li class="nav-item dropdown" role="presentation">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-expand="false">Paints</a>
<ul class="dropdown-menu multi-column dropdown-menu-centre">
<div class="row" role="menu">
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li>
Bristle Paint Brushes
</li>
<li>
Paints Link two
</li>
</ul>
</div>
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li>
Anti Condensation Paint
</li>
</ul>
</div>
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li>
Paints Link one
</li>
</ul>
</div>
</div>
</ul>
</li>
<li class="nav-item dropdown" role="presentation">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-expand="false">Woodcare</a>
<ul class="dropdown-menu multi-column dropdown-menu-centre">
<div class="row" role="menu">
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li>
Wood Link one
</li>
<li>
Wood Link two
</li>
</ul>
</div>
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li>
Wood Link one
</li>
</ul>
</div>
</div>
</ul>
</li>
<li class="nav-item dropdown" role="presentation">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-expand="false">Brushes & Rollers</a>
<ul class="dropdown-menu multi-column dropdown-menu-centre">
<div class="row" role="menu">
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li>
Brushes Link one
</li>
<li>
Brushes Link two
</li>
</ul>
</div>
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li>
Brushes Link one
</li>
</ul>
</div>
</div>
</ul>
</li>
<li class="nav-item dropdown" role="presentation">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-expand="false">PPE</a>
<ul class="dropdown-menu multi-column dropdown-menu-last">
<div class="row" role="menu">
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li>
PPE Link one
</li>
<li>
PPE Link two
</li>
</ul>
</div>
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li>
PPE Link one
</li>
</ul>
</div>
</div>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!-- 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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
我遇到的问题可以在附图中看到，所有子菜单都应与绘制父菜单对齐
任何帮助，将不胜感激
解决方案
工作 Gif，因为你说它不工作..：
给你：https ://jsfiddle.net/h4ynogLe/
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
@media (min-width: 768px) {
.nav li {
display: block;
transition-duration: 0.5s;
}
}
@media (min-width: 768px) {
li:hover {
background: #ffffff;
cursor: pointer;
}
}
@media (min-width: 768px) {
ul.nav li ul.multi-column {
visibility: hidden;
opacity: 0;
position: absolute;
transition: all 0.5s ease;
margin-top: 1.1rem;
left: 0;
display: none;
}
}
@media (min-width: 768px) {
ul.nav li:hover > ul.multi-column, ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}
}
@media (min-width: 768px) {
ul.nav li ul.multi-column li {
clear: both;
width: 100%;
}
}
@media (min-width: 768px) {
.multi-column {
border: 1px solid black;
border-top: 0;
background-color: #ffffff!important;
margin-top: 0!important;
width: 500px;
}
}
@media (min-width: 768px) {
.multi-column-dropdown {
/*margin: 0;*/
padding: 0 0 0 5px;
}
}
.dropdown-menu-centre {
right: auto!important;
left: auto!important;
/*-webkit-transform: translate(0, 0);*/
/*transform: translate(0, 0);*/
background-color: green!important;
}
.dropdown-menu-last {
right: auto;
left: -85%;
-webkit-transform: translate(-85%, 0);
transform: translate(-85%, 0);
}
</style>
</head>
<body>
<nav class="navbar navbar-light navbar-expand-md navigation-clean">
<div class="container">
<button data-toggle="collapse" class="navbar-toggler" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navcol-1">
<ul class="nav navbar-nav mx-auto">
<li class="nav-item dropdown" role="presentation">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-expand="false">Paints</a>
<ul class="dropdown-menu multi-column dropdown-menu-centre ml-4">
<div class="row" role="menu">
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li>
Bristle Paint Brushes
</li>
<li>
Paints Link two
</li>
</ul>
</div>
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li>
Anti Condensation Paint
</li>
</ul>
</div>
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li>
Paints Link one
</li>
</ul>
</div>
</div>
</ul>
</li>
<li class="nav-item dropdown" role="presentation">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-expand="false">Woodcare</a>
<ul class="dropdown-menu multi-column dropdown-menu-centre ml-n5 pl-5">
<div class="row" role="menu">
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li>
Wood Link one
</li>
<li>
Wood Link two
</li>
</ul>
</div>
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li>
Wood Link one
</li>
</ul>
</div>
</div>
</ul>
</li>
<li class="nav-item dropdown" role="presentation">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-expand="false">Brushes & Rollers</a>
<ul class="dropdown-menu multi-column dropdown-menu-centre ml-n5 pl-5" style="margin-left: -150px !important;">
<div class="row" role="menu">
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li>
Brushes Link one
</li>
<li>
Brushes Link two
</li>
</ul>
</div>
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li>
Brushes Link one
</li>
</ul>
</div>
</div>
</ul>
</li>
<li class="nav-item dropdown" role="presentation">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-expand="false">PPE</a>
<ul class="dropdown-menu multi-column dropdown-menu-centre ml-n5 pl-5" style="margin-left: -303px !important;">
<div class="row" role="menu">
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li>
PPE Link one
</li>
<li>
PPE Link two
</li>
</ul>
</div>
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li>
PPE Link one
</li>
</ul>
</div>
</div>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!-- 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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
说明：我刚刚调整了边距，因为它们可能是负数。我还删除了您的最后一个转换类。
推荐阅读
- java - 向多个用户发送大字符串
- email - centos 7同时在本地和远程保存rsyslog
- javascript - 如何将 Javascript 多维数组值发送到 Java servlet？
- visual-studio-code - ParrotOS 上的 Vscode：ERR_INTERNET_DISCONNECTED
- bash - 在特殊条件下并排合并两个文件
- c# - 从基类控制事件
- python - QRadioButtons 小部件以唯一性链接
- php - 如何在数据库中具有相同ID的多行中插入多个复选框值
- java - Selenium 和 WhatsApp 用于向特定电话号码发送消息
- scala - 在 Scala 中建立列表