我想使工作引导子菜单可切换，并在子菜单中有一些选项可供选择，但我不知道该如何做，也没有在任何地方找到答案。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script type="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/popper.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-grid.min.css">
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"><img src="jdm.png"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="main2.html">Menu</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu2</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item dropdown-toggle" href="">Submenu</a></li>
<a class="dropdown-item" href="">Option in Submenu</a>
//I would want to make a working submenu
</ul>
</ul>
</li>
</ul>
</div>
</nav>
</body>
</html>
答案 0 :(得分：1)
这是一个重复的问题，在此链接中您可以找到类似的问题（如果不是同一问题） Bootstrap 4: Multilevel Dropdown Inside Navigation
您可以找到一些有用的答案！
***如果有帮助，请不要忘记将其标记为接受的答案****
答案 1 :(得分：0)
这里有一些示例可以用来向https://codepen.io/bootstrapped/pen/KwYGwq学习
这是html
<br>
<div class="container">
<p class="lead"> This is an <b>updated</b> version of the <em class="text-danger">Bootstrap 3 navbar logos demo</em>. There is a <a target="_blank" rel="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=930218">bug in firefox</a> that incorrectly displays padding on
images nested inside floating blocks. For more details and why it's important to use this method with the navbar logo read about check out this demo <a target="_blank" href="https://codepen.io/bootstrapped/details/OMXQVo">here</a>.
<br><br>
If you want to see how to get your navbar to automatically collapse if the menu items overflow, check out <a href="https://codepen.io/bootstrapped/pen/xOyAPz">this codepen</a>.
</p>
<p class="lead">
If you want to create a sticky navbar check out <a target=_"blank" href="https://codepen.io/bootstrapped/details/jAKqLV/">this</a>. Or for sticky with pure js only see <a target=_"blank" href="https://codepen.io/bootstrapped/details/mEKAzG/">this</a> or alternatively <a target=_"blank" href="https://codepen.io/bootstrapped/details/vKAXZd/">this</a> which shows how to do it with affix events.
</p>
</div>
<h1 class="text-center">Example 1 - Default Logo Resized to fit</h1>
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://disputebills.com"><img src="https://res.cloudinary.com/candidbusiness/image/upload/v1455406304/dispute-bills-chicago.png" alt="Dispute Bills">
</a>
</div>
<div id="navbar1" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</div>
<h1 class="text-center">Example 2 - Increase logo size and add menu to right side</h1>
<div class="container example2">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar2">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://disputebills.com"><img src="https://res.cloudinary.com/candidbusiness/image/upload/v1455406304/dispute-bills-chicago.png" alt="Dispute Bills">
</a>
</div>
<div id="navbar2" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</div>
<h1 class="text-center">Example 3 - Increase entire navbar height</h1>
<div class="example3">
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar3">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://disputebills.com"><img src="https://res.cloudinary.com/candidbusiness/image/upload/v1455406304/dispute-bills-chicago.png" alt="Dispute Bills">
</a>
</div>
<div id="navbar3" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</div>
<h1 class="text-center">Example 4 - Tall Narrow Logo</h1>
<div class="container example4">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar4">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://disputebills.com"><img style=" width: 64px;" src="https://res.cloudinary.com/disputebills/image/upload/v1462474206/blue-mark_cnzgry.png" alt="Dispute Bills">
</a>
</div>
<div id="navbar4" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</div>
<h1 class="text-center">Example 5 - Pull menu to right</h1>
<div class="container example5">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar5">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://disputebills.com"><img style=" width: 64px;" src="https://res.cloudinary.com/disputebills/image/upload/v1462474206/blue-mark_cnzgry.png" alt="Dispute Bills">Brand Name
</a>
</div>
<div id="navbar5" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</div>
<h1 class="text-center">Example 6 - Background Image with hidden text</h1>
<nav class="navbar navbar-inverse navbar-static-top example6">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar6">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand text-hide" href="http://disputebills.com">Brand Text
</a>
</div>
<div id="navbar6" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
<h1 class="text-center">Example 7 - Center Navbar Brand / Logo On Mobile Display</h1>
<p class="text-center lead">
Resize the browser width to view the effect!
</p>
<div class="container example-7">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar7">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://disputebills.com"><img src="https://res.cloudinary.com/disputebills/image/upload/v1462474206/blue-mark_cnzgry.png" alt="Dispute Bills">
</a>
</div>
<div id="navbar7" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li class="active"><a href="http://disputebills.com">Home</a></li>
<li><a href="#">About</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="http://disputebills.com">Home</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</div>
<br>
<h1 class="text-center">Example 8 - Center Navbar logo background</h1>
<p class="text-center lead">
Resize the browser width to view the effect!
</p>
<nav class="navbar navbar-inverse navbar-static-top example-8">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar8">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand text-hide" href="#">Brand Text
</a>
</div>
<div id="navbar8" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
<br>
<h1 class="text-center">Example 9 - Version 2 Centered (Using flexbox)</h1>
<p class="text-center lead">
Resize the browser width to view the effect!
</p>
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar9">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="brand-centered">
<a class="navbar-brand" href="http://disputebills.com"><img style="margin-right: 10px; padding: 0;" src="https://res.cloudinary.com/disputebills/image/upload/v1462474206/blue-mark_cnzgry.png" alt="Dispute Bills">Dispute Bills
</a>
</div>
<div id="navbar9" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</div>
这是CSS
/**********************************
Responsive navbar-brand image CSS
- Remove navbar-brand padding for firefox bug workaround
- add 100% height and width auto ... similar to how bootstrap img-responsive class works
***********************************/
.navbar-brand {
padding: 0px;
}
.navbar-brand>img {
height: 100%;
padding: 15px;
width: auto;
}
/*************************
EXAMPLES 2-7 BELOW
**************************/
/* EXAMPLE 2 (larger logo) - simply adjust top bottom padding to make logo larger */
.example2 .navbar-brand>img {
padding: 7px 15px;
}
/* EXAMPLE 3
line height is 20px by default so add 30px top and bottom to equal the new .navbar-brand 80px height */
.example3 .navbar-brand {
height: 80px;
}
.example3 .nav >li >a {
padding-top: 30px;
padding-bottom: 30px;
}
.example3 .navbar-toggle {
padding: 10px;
margin: 25px 15px 25px 0;
}
/* EXAMPLE 4 - Small Narrow Logo*/
.example4 .navbar-brand>img {
padding: 7px 14px;
}
/* EXAMPLE 5 - Logo with Text*/
.example5 .navbar-brand {
display: flex;
align-items: center;
}
.example5 .navbar-brand>img {
padding: 7px 14px;
}
/* EXAMPLE 6 - Background Logo*/
.example6 .navbar-brand{
background: url(https://res.cloudinary.com/candidbusiness/image/upload/v1455406304/dispute-bills-chicago.png) center / contain no-repeat;
width: 200px;
}
/* EXAMPLE 8 - Center on mobile*/
@media only screen and (max-width : 768px){
.example-8 .navbar-brand {
padding: 0px;
transform: translateX(-50%);
left: 50%;
position: absolute;
}
.example-8 .navbar-brand>img {
height: 100%;
width: auto;
padding: 7px 14px;
}
}
/* EXAMPLE 8 - Center Background */
.example-8 .navbar-brand {
background: url(https://res.cloudinary.com/candidbusiness/image/upload/v1455406304/dispute-bills-chicago.png) center / contain no-repeat;
width: 200px;
transform: translateX(-50%);
left: 50%;
position: absolute;
}
/* EXAMPLE 9 - Center with Flexbox and Text*/
.brand-centered {
display: flex;
justify-content: center;
position: absolute;
width: 100%;
left: 0;
top: 0;
}
.brand-centered .navbar-brand {
display: flex;
align-items: center;
}
.navbar-toggle {
z-index: 1;
}
/* CSS Transform Align Navbar Brand Text ... This could also be achieved with table / table-cells */
.navbar-alignit .navbar-header {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
height: 50px;
}
.navbar-alignit .navbar-brand {
top: 50%;
display: block;
position: relative;
height: auto;
transform: translate(0,-50%);
margin-right: 15px;
margin-left: 15px;
}
.navbar-nav>li>.dropdown-menu {
z-index: 9999;
}
body {
font-family: "Lato";
}