问题描述
我正在尝试构建一个 2 行的导航栏。导航栏中有 3 个菜单需要折叠。我也使用过 flex Box 类（我对 flex 还是很陌生，所以如果我猜的话，这可能是问题所在）。当我减小浏览器宽度时，我得到了我的汉堡包，并且 3 个菜单消失了。但是当我点击汉堡时什么也没有出现。我确实在引导之前加载了 jquery 和 popper。我现在只是在构建它，一旦一切正常，我就会将所有内容转换为 wordpress。
这是其中的Codepen：
<!DOCTYPE html>
<html lang="en-US">
<head>
<Meta charset="UTF-8" />
<Meta name="viewport" content="width=device-width,initial-scale=1">
<title>Website Title</title>
<Meta name='robots' content='noindex,nofollow' />
<link rel='stylesheet' id='bootstrap-css' href='//cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css?ver=5.7.2' type='text/css' media='all' />
<link rel='stylesheet' id='style-css' href='https://path/style.css?ver=5.7.2' type='text/css' media='all' />
<script type='text/javascript' src='https://path/wp-includes/js/jquery/jquery.min.js?ver=3.5.1' id='jquery-core-js'></script>
<script type='text/javascript' src='https://path/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.3.2' id='jquery-migrate-js'></script>
<script type='text/javascript' src='//kit.fontawesome.com/90af925a41.js?ver=5.7.2' id='fontawesome2-js'></script>
</head>
<body>
<nav class="navbar navbar-expand-md">
<!--<div class="container">-->
<button class="navbar-toggler bg-dark text-white" type="button" data-toggle="collapse" data-target=".navbars" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<div class="d-flex flex-column w-100">
<div class="collapse navbar-collapse navbar-dark bg-dark navbars" id="navbarSupportedContent">
<ul class="navbar-nav p-2 flex-fill text-white text-start">
<li class="nav-item"><i class="fab fa-facebook-f"></i></li>
<li class="nav-item"><i class="fab fa-twitter"></i></li>
<li class="nav-item"><i class="fab fa-instagram"></i></li>
<li class="nav-item"><i class="fab fa-youtube"></i></li>
</ul>
<ul class="navbar-nav p-2 flex-fill text-small text-white text-end hat-2 navbars" id="navbarSupportedContent">
<li class="nav-item address-icon"><i class="fas fa-map-marker-alt"></i> 123 E. Main Street,Los Angeles</li>
<li class="nav-item email-icon"><i class="fas fa-pencil-alt"></i> <a href="mailto:email@address.com">email@address.com</a></li>
<li class="nav-item icon"><a href="#"><i class="fas fa-user"></i></a></li>
<li class="nav-item icon"><a href="#"><i class="fas fa-shopping-cart"></i></a></li>
<li class="nav-item icon"><a href="#"><i class="fas fa-search"></i></a></li>
</ul>
</div>
<div class="d-flex w-100 navbar-light bg-light">
<div class="navbar-brand p2 align-self-center text-start">
<a href="/">
<svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1761 1768.6" style="enable-background:new 0 0 1761 1768.6;" xml:space="preserve" width="85" height="85">
<g>
<defs>
<path id="SVGID_1_" d="M181.7,789.4l-44.7-4.6l0.2-2.2c4-38.8-8.8-74.3-49.1-78.5c-44.9-4.6-60.1,36.5-64,74.2l-6.1,59.4
L175.1,854L181.7,789.4z M97.4,778.9l-0.2,1.7l-26.4-2.7l0.2-1.7c1.1-10.8,7.5-15.7,14.9-14.9C93.2,762,98.5,767.8,97.4,778.9z
M113.9,685.5c43.1,15.3,89.5-9.2,106-55.8c16.5-46.6-4.1-94.8-47.2-110.1c-43.1-15.3-89.5,9.2-105.9,55.8
C50.1,622.1,70.7,670.3,113.9,685.5z M121.2,594.8c4.5-12.7,18.4-19.4,31.1-14.9c12.7,4.5,19.4,18.4,14.9,31.1
c-4.5,12.7-18.4,19.4-31.1,14.9C123.4,621.4,116.7,607.5,121.2,594.8z M150.4,403.6c10.3-16.2,26.7-32.6,40.6-40.7l43.6,27.7
c-19.6,11.8-33.1,26-37.4,32.8c-3.4,5.3-2.3,8.1-0.3,9.4c2.8,1.8,5.1,0.4,7.3-1.3c5.2-4.5,19.1-21.4,37.7-27.9
c13.1-4.3,25.3-2.8,37.2,4.8c25.5,16.3,30.3,48.2,8,83.1c-10.6,16.7-27.4,34.2-42.5,42.9l-45.2-28.8
c22.9-10.5,38.6-25.8,43.6-33.7c3.5-5.5,2.1-8.2-0.1-9.6c-2.6-1.6-4.7-0.7-6.8,1.4c-5.7,5.4-19.6,22.7-40.2,28.7
c-10.7,3-22.4,2.3-35.2-5.9C134.1,469.4,129,437.2,150.4,403.6z M327.5,429.5l-118.6-104l42.8-48.8l118.6,104L327.5,429.5z
M310.1,289.4l-33.6-41.7l119.1-95.9l33.6,41.7L395,221.1l65.3,81.1l-50.6,40.7l-65.3-81.1L310.1,289.4z M505.7,271.6l-76.2-138.1
l56.8-31.4l76.2,138.1L505.7,271.6z M621.6,214.7l-106.7-131l66.7-21.9l48.3,72.2l0.4-0.1l-2.6-87.3L688,26.8l-8,168.7
L621.6,214.7z M741.2,179.6l-15.5-157l113-11.1l5.2,52.5l-48.4,4.8l0.8,8.5l39-3.8l3.7,37.3l-39,3.8l0.9,8.9l51.4-5.1l4.9,49.9
L741.2,179.6z M965.5,1583.3l-57.7,8.5l22.6,152.6l62.8-9.3l-6.4-43.4l2.1-0.3c37.7-5.6,68.3-26.2,62.5-65.4
C1044.8,1582.3,1002.2,1577.8,965.5,1583.3z M982.7,1652.7l-1.7,0.2l-3.8-25.7l1.7-0.2c10.5-1.6,16.6,3.4,17.7,10.5
C997.6,1644.6,993.4,1651.1,982.7,1652.7z M1187.7,1634.3l15.2,46.6l-108.4,35.3l-47.8-146.7l105.5-34.4l16,49l-45.2,14.7l2.6,7.9
l36.5-11.9l11.4,34.8l-36.5,11.9l2.7,8.3L1187.7,1634.3z M1288.3,1490.8c-20.8-5.5-45.4-2.4-71.5,12l-56.5,31.2l74.6,135
l56.9-31.4c25.5-14.1,41.5-33.2,48.1-54.3c5.7-18.3,3.9-38.2-6.4-56.8C1322.7,1506.8,1306.5,1495.6,1288.3,1490.8z M1284.1,1574.4
c-1.9,7.1-7.3,14-16.7,19.2l-1.3,0.7l-26-47l1.7-0.9c10.3-5.7,18.3-6,24.5-4.1c5.9,1.9,11.4,6.1,15.1,12.8
C1285.1,1561.7,1285.7,1568.4,1284.1,1574.4z M1325.2,1432.2l57.3,154.8l47.4-41.5l-8.8-19.2l26.6-23.3l17.3,11.7l51.6-45.2
l-145.8-77.4L1325.2,1432.2z M1388.8,1461.5l25.7,19.1l-10.6,9.3l-15.5-28.1L1388.8,1461.5z M1558.5,1323.7l43.6,33.1l-67.3,88.5
l-122.7-93.4l38.4-50.5l79.2,60.2L1558.5,1323.7z M1629,1205.1l43.4,22.7l-52.7,101.1l-136.8-71.3l51.3-98.4l45.7,23.8l-22,42.1
l7.4,3.8l17.7-34l32.5,16.9l-17.7,34l7.7,4L1629,1205.1z M1626.1,1034.4c-39.3-12.1-59.6,26.9-68.9,57.2l-18.6,60.5l147.4,45.4
l18.7-60.7l-48.4-14.9l0.2-0.8l55.2-7l19.6-63.7l-75.9,13.4C1651,1050.3,1641.9,1039.3,1626.1,1034.4z M1623.7,1107l-1.4,4.5
l-22.6-7l1.4-4.5c2.9-9.4,9.2-12.3,15.5-10.4C1622.9,1091.6,1626.7,1097.4,1623.7,1107z M1742.6,974.3
c-2.4,19.2-9.9,41.7-19.7,55.7l-52-6.5c15.9-18.8,23.4-38.9,24.5-48c0.8-6.3-1.6-8.1-4.1-8.5c-3-0.4-4.5,1.4-5.4,4
c-2.8,7.2-7.8,28.2-23.5,42.1c-8.2,7.1-18.8,11.4-33.6,9.5c-30.7-3.8-48.6-30.1-43.8-68.8c2.3-18.6,10-40,18.9-53l50.1,6.3
c-12.4,18.6-18.4,36.8-19.3,44.6c-0.8,1.3,8.1,3.7,8.4c3.2,4.7-1.8,5.9-4.2c2.7-6.1,7.9-26.9,21.6-40.5
c9.8-9.3,21.2-13,34.9-11.3C1730.1,907.9,1747.7,934.1,1742.6,974.3z M1752.1,839.5c1,13.3-12.2,25.1-29.4,26.3
c-0.4,0-0.8,0-1.2,0c0,3.5,0.1,7,10.5h-95.8c0-409-332.8-741.7-741.7-741.7c0,0V38.8c0,0c0.5,0.9,1.4,0
c0.2-17,10.9-30.8,24.1-30.8c13.3,24.1,14,31.2c0,0.4-0.1,0.7-0.1,1.1c3.9,0.2,7.8,0.5,11.6,0.7c1.4-17,13-29.9,26.2-29
c13.3,1,23.1,15.6,21.8,32.8c0,0.7-0.2,1c3.9,7.7,1.1,11.5,1.6c2.6-16.8,15.1-28.9,28.2-27
c13.2,21.9,17.2,34.3c0,0.3-0.2,0.6-0.2,1c3.8,0.8,7.6,1.6,2.5c3.8-16.6,17.2-27.7,30.1-24.9
c13,2.8,20.6,18.8,16.9,35.6c-0.1,0.6-0.3,1c3.7,7.5,2.2,11.2,3.3c5-16.3,19.1-26.5,31.8-22.7
c12.8,3.8,19.2,20.2,14.4,36.7c-0.1,0.4-0.3,0.7-0.4,7.3,2.7,10.9,4c6.1-15.9,20.9-25.1,33.3-20.5
c12.5,4.7,21.5,11.7,37.6c-0.1,0.7-0.5,1.1c3.5,7.1,3.2,10.6,4.8c7.2-15.5,22.7-23.6,34.7-18.1
c12.1,5.5,16.1,22.7,9,38.4c-0.2,0.4-0.4,0.7-0.6,1.1c3.4,6.8,3.6,10.2,5.5c8.3-15,24.4-22,36-15.6
c11.7,6.4,14.5,23.8,6.2,38.9c-0.2,0.4-0.5,0.7-0.7,1.1c3.3,2.1,6.6,4.1,9.8,6.2c9.3-14.4,25.9-20.3,37.1-13.1
c11.2,7.2,12.7,24.8,39.3c-0.3,0.4-0.6,0.8-0.9,1.2c3.1,2.3,6.3,4.6,9.3,6.9c10.3-13.8,27.3-18.5,38-10.5
c10.7,25.6,0.6,39.4c-0.3,0.4-0.7,0.7-1,1.1c3,2.5,5.9,5,8.8,7.5c0,0c11.3-13,28.6-16.5,38.6-7.8
c10.1,8.7,9.1,26.3-2.2,0.7-1.1,1.1c2.8,5.6,5.4,8.3,8.1c0,0c12.2-12.2,29.7-14.4,39.1-5
c9.4,9.4,26.9-5,39.1c-0.4,0.4-0.8,0.6-1.2,1c2.6,2.9,5.2,5.8,8.7c0,0c13-11.3,30.6-12.3,39.4-2.2
c8.7,10.1,27.4-7.8,38.6c-0.4,0.3-0.8,0.9c2.4,3.1,9.2c13.8-10.3,31.4-10,39.4,0.6
c8,10.7,3.3,27.7-10.5,38c-0.4,0.5-1.2,0.8c2.1,4.3,9.7c14.5-9.2,32-7.7,39.2,3.5
c7.2,27.8-13.2,37.1c-0.4,0.2-0.8,0.4-1.2,0.6c1.9,6.7,5.7,10.1c15.1-8.1,32.4-5.3,38.7,6.3
c6.4,11.7-0.7,27.9-15.8,36.1c-0.4,0.2-0.7,0.3-1.1,0.5c1.7,4.9,10.5c15.6-7,32.6-3,38.1,9.1
c5.5,12.1-2.7,27.7-18.3,34.9c-0.3,0.2-1.1,0.4c1.4,10.9c16-5.8,32.7-0.6,37.3,11.8
c4.7,12.5-4.6,27.5-20.8,33.5c-0.3,0.1-0.7,0.2-1,0.3c1.1,7.4,11.2c16.4-4.6,32.6,1.7,36.3,14.4
c3.8,12.8-6.6,27.1-23.1,31.9c-0.3,0.1-1,0.2c0.9,11.4c16.7-3.5,32.4,35.2,17
c2.8,13-8.5,26.5-25.3,30.2c-0.4,0.1-1.1,0.1c0.6,11.5c16.9-2.3,32.1,33.9,19.4
c1.9,13.2-10.4,25.9-27.4,28.3c-0.4,0.1-0.8,0-1.1,0.1c0.3,3.9,11.6C1736.6,816.6,1751.2,826.3,1752.1,839.5z
M751.5,437.8v305.9H445.6V1009h305.9v305.9h265.3V1009h305.9V872.1l212.7-2.7c0.6,4.8,4.8c0,0l54.2-0.7
c0,2.8c0,0.1c1.9,3.6-0.5,5.5-0.5c2.3,0.7c0-0.1,0-0.1,0-0.2
c0-394.2-317-715.7-709.4-723.2l0,0l-2.4,0l0,0c-3.8-0.1-7.6-0.1-11.5-0.1c0.1,12.1c2.1,4.2,0.1
l-1,54.2c-0.1,2,5.3,5.9l-3.7,212.6H751.5z M1020.1,239.5C1020.1,239.5,1020.1,239.5c2.8,5.4-1.9,6-4.8
l11.2-53c41.6,81.8,120.3,38l-21.2,49.7c-1.1,2.7-0.1,7.2l-121.7,285.5V437.8h-38.6L1020.1,239.5z M1279.5,285.4
l-30.4,44.6c-1.6,2.4-1.2,0.7,7.5l-233.1,342.1V568.4l123.9-290.7c0.4,1.2,0.2c2.4,4.6-1.4,5.6-3.7l21.2-49.7
C1207.5,241.6,1244.6,262,1279.5,285.4z M1329.2,322c-2.1,0.8-4,2-5.6,3.9l-43.9,52.3c-4.7,5.6-4,18.8
c2.5,8.5,3.1c3.8,7.6-1.6,10.2-4.8l43.9-52.3c1.6-1.9,2.5-4.1,2.9-6.3c12.9,11.1,25.4,22.6,37.5,34.6l-38.2,38
c-2.1,2.1-2.2,5.2-0.7,7.5L1016.8,743v-59.1l235.1-345c0.7,0.3,1.5,0.5c1.9,3.8-0.9,5-2.6l30.4-44.5
C1303.1,301.7,1316.3,311.6,1329.2,322z M1524.9,730.6c-2.8,0.6-4.7,3.2-4.6,6l-197.7,43.1v-35.9h-126.1l286.6-122.9
c1.1,3,2.6,2.6c0.8,1.6-0.2,2.4-0.5l49.7-21.3c15.8,37.6,28.5,76.9,117.4L1524.9,730.6z M1485.7,611.8
c-2.7,1.1-4,4-3.4,6.7l-291.9,125.2h-109.8l342.1-233.5c1.1,1.8c1.2,2.4-0.3,3.4-1.1l44.6-30.4
c23.3,34.6,43.6,71.4,60.5,110L1485.7,611.8z M1423.4,501c-2.4,1.6-3.1,4.7-2.1,7.3l-345,235.5h-56.9l327.6-325.3
c1,1.1c1.5,3.1-0.6,4.3-1.8l38.2-38c27.4,28.1,52.6,58.5,75.1,90.8L1423.4,501z M1322.6,782.1l198.1-43.2
c1,3.6c0.4,1.3-0.1l52.9-11.5c8.8,42.3,13.9,85.9,14.8,130.5l-54.2,0.7c-2.9,0-5.2,2.2-5.7,4.9
l-212.6,2.7V782.1z M896.8,225.3c2.8-0.5,4.9-2.8,4.9-5.7l1-54.3c41.9,82.9,122.7,13.9l-11.2,53c-0.6,6.7
l-42.1,199h-82.6L896.8,225.3z M854.7,1330.6h29.4v409.6c-10.9,0-21.5-1.2-32.3-1.6c2.5-37.6-17.8-69.7-45.6-71.7
c-27.2-2-51.4,25.6-55.2,62c-10.5-1.6-21.1-2.8-31.5-4.8c0,0-0.1c8.6-37-6.6-72.1-34-78.4c-26.8-6.2-55.2,17.7-64.4,53.5
c-10.2-3.3-20-7.4-30-11c13.9-35.1,4.3-71.8-21.6-82.2c-25.4-10.2-56.8,8.7-71.5,42.3c-9.5-4.8-19.3-9.1-28.6-14.2
c0,0.1-0.1,0.1-0.1c19.4-32.6,15.6-70.7-8.5-85.1c-23.4-13.9-57.2,0.1-76.9,30.8c-8.7-6.2-17.3-12.7-25.7-19.3
c23.7-29.2,25.7-66.9,4.3-84.7c-21.1-17.4-56.7-8.7-80.9,18.8c-7.7-7.5-15-15.3-22.4-23.1c28-25.2,35.8-62.2,17.3-83.1
c-18.1-20.4-54.3-17.3-82.4,5.9c-6.4-8.6-13.1-16.9-19.2-25.7c31.7-20.6,45.3-56.2,30.2-79.7c-14.8-23.1-51.7-25.6-83.2-6.5
c-5-9.4-9.2-19.3-13.9-28.9c34.3-15.5,53.1-48.5,41.8-74c-11.1-25-46.8-33.2-80.7-19.4c-3.5-10.1-7.6-20-10.8-30.3
c0.1,0c36.7-9.8,60.5-39.8,53.3-66.9c-7.1-26.4-41.3-40-77-31.5c-1.9-10.5-3.3-21.1-4.9-31.7
c37.5-4.3,65.4-30,62.4-57.8c-2.9-27.2-34.5-46.1-71.1-43.2c-0.2-7.4-1.1-14.7-1.1-22.1v0h390c0.2,13.1,26.2,39.3
c-22-0.2-61.8,2.6-104.3,24.1c-1.9,1-43.2,22.2-64.2,49.2c-28.7,36.9-29.2,97.9-5.2,163.7c88.3,206.1,272.4,361.6,496,410.7
c16.2,37.1-0.4,56.9-11.7c37.2-21.3,47.4-64,57.9-108.4C853.7,1418.7,859.7,1379.6,854.7,1330.6z"/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" style="overflow:visible;"/>
</clipPath>
<g transform="matrix(1 0 0 1 0 0)" style="clip-path:url(#SVGID_2_);">
<image style="overflow:visible;" width="1920" height="1229" xlink:href="https://path/images/rainbow-background.jpg" transform="matrix(6.372838e-11 -0.9445 1.4194 4.240267e-11 8.2689 1790.9724)"></image>
</g>
</g>
<g>
<defs>
<path id="SVGID_3_" d="M1730.8,910c-9.1,0-16.5-7.4-16.5-16.5s7.4-16.5,16.5-16.5s16.5,16.5,16.5S1739.9,910,1730.8,910z
M1730.8,880.2c-7.3,0-13.3,5.9-13.3,13.3c0,13.3,13.3s13.3-5.9,13.3-13.3C1744.1,886.2,1738.1,880.2,880.2z
M1739.4,884.2l-0.2,5.5l-6.6,4.5l-0.1,2.1l6.4,0.2l-0.2,4.5l-17.5-0.6l0.3-7.6c0-1,0.1-1.9,0.3-2.7c0.1-0.7,0.4-1.4,0.8-2.1
c0.4-0.7,0.9-1.2,1.6-1.5c0.6-0.4,1.4-0.5,2.4-0.5c1.3,1c0.8,2.6L1739.4,884.2z M1727,890.8
c-0.4,0.2c-0.3,0.2-0.6,0.5-0.8,0.9c-0.1,0.7-0.3,1.1c0,0.9-0.1,1.4l-0.1,1.6l4.7,0.2l0-1.4
c0-0.7,0-1.3,0-1.8c0-0.5-0.2-0.9-0.4-1.2c-0.2-0.3-0.5-0.6-0.8-0.7C1727.9,890.9,1727.5,890.8,1727,890.8z"/>
</defs>
<clipPath id="SVGID_4_">
<use xlink:href="#SVGID_3_" style="overflow:visible;"/>
</clipPath>
<g transform="matrix(1 0 0 1 0 0)" style="clip-path:url(#SVGID_4_);">
<image style="overflow:visible;" width="1920" height="1229" xlink:href="https://path/images/rainbow-background.jpg" transform="matrix(6.372838e-11 -0.9445 1.4194 4.240267e-11 8.2689 1790.9724)"></image>
</g>
</g>
</svg>
</a>
</div>
<div class="p-2 align-self-center flex-fill site-name">
<a href="#">
Site Title<br />
<span>Site Description</span>
</a>
</div>
<div class="collapse navbar-collapse p-2 align-self-center flex-fill text-center navbars" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">#hastag</a></li>
<li class="nav-item"><a class="nav-link" href="#">Mission</a></li>
<li class="nav-item"><a class="nav-link" href="#">Members</a></li>
<li class="nav-item"><a class="nav-link" href="#">Events</a></li>
<li class="nav-item"><a class="nav-link" href="#">Chapters</a></li>
<li class="nav-item"><a class="nav-link" href="#">Merchandise</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
<div class="p-2 align-self-center flex-fill text-end">
<a class="btn btn-success donate" href="#" role="button">Donate Now!</a>
</div>
</div>
</div>
<!--</div>-->
</nav>
<div class="container">
<p>Welcome to wordpress. This is your first post. Edit or delete it,then start writing!</p>
</div>
<script type='text/javascript' src='//cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js?ver=5.7.2' id='bootstrap_bundle-js'></script>
</body>
</html>
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）