首先，我是一个初学者。 我正在尝试创建一个响应导航栏与引导，但它是没有响应的所有。
我完全迷路了。‘谁能帮帮我。。。 谢谢
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<div id="navbar" class="container-fluid">
<div class="container-fluid nav-fill">
<nav class="navbar navbar-expand-md navbar-light d-flex justify-content-center" role="navigation">
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarContent"
aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse d-flex align-items-center justify-content-lg-between " id="navbarContent">
<ul class="navbar-nav nav-fill w-100 d-flex align-items-center">
<li class="nav-item">
<ul class="navbar-nav nav-fill d-flex align-items-center">
<li class="nav-item">
<a class="brand-logo navbar-brand" href="#"><img class="sr-logo" src="./img/sr-logo.png"
alt="sr-logo.png"></a>
</li>
<li class="nav-item">
<a class="brand-logo-user navbar-brand" href="#"><img class="lvmh-logo" src="./img/lvmh-logo.jpg"
alt="lvmh-logo.jpg"></a>
</li>
</ul>
</li>
<li class="nav-item w-50">
<ul class="navlinks navbar-nav nav-fill w-100">
<li class="nav-item">
<a class="nav-link active" href="#">LINK1<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">LINK2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">LINK3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">LINK4</a>
</li>
</ul>
</li>
<li class="nav-item align-items-center ml-5">
<ul class="navbar-nav nav-fill align-items-center">
<li>
<li class="nav-item">
<img src="img/profil.svg" class="profile d-inline">
</li>
<li>
<li class="nav-item">
<p class="username d-inline ml-3">Mr. Blah</p>
</li>
</ul>
</li>
<li class="nav-item">
<ul class="navbar-nav nav-fill d-flex justify-content-between w-75">
<li class="nav-item active">
<a class="language active d-inline">FR</a>
</li>
<li class="nav-item">
<a class=" language d-inline">EN<a>
</li>
</ul>
</li>
</div>
</div>
</nav>
</div>
</div>
</header>
<script src="scripts.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
crossorigin="anonymous"></script>
</body>
</html>```
My CSS :
```body{
font-family: 'Poppins', sans-serif;
}
nav{
background-color: white;
height: 97px;
padding: 0;
margin: 0;
}
.brands {
display: inline;
align-items: center;
}
.navbar-light .navbar-nav .nav-link {
color: black;
}
.navlinks{
font-size: 14px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: 0.5px;
text-align: center;
color: black
}
.navlinks li > a:after{
content: '';
display: block;
height: 5px;
background-color:#00e7b5;
border-radius: 7%;
transform: scaleX(0);
transition: transform .3s;
}
.navlinks li > a:hover:after{
transform: scaleX(1);
transition: transform .3s;
}
.navlinks .active{
color:#00e7b5 !important;
}
img{
max-width: 150px;
max-height: 20px;
}
.username{
font-size: 14px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
text-align: center;
color: #5300b4;
}
.language{
font-family: Poppins;
font-size: 18px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: 2px;
color: black;
}
.navlinks a:hover{
color: #00e7b5 !important;
}
nav ul{
text-align: center;
}```
首先删除BS v3的所有实例，只添加BS v4的CDN，确保在关闭body标记之前在header和JS链接中添加CSS链接。 您可以从这里获得最新的CDN，请确保在添加bootstrap js之前包括jquery和popper.js，因为BS4依赖于这两个脚本，您可以在同一个链接上找到这些脚本CDN，然后
您必须正确地对齐您的内容，因为目前它不是，阅读更多关于引导导航栏在这里，现在来到您的查询中的指针
导航栏不会折叠我的元素。 在正确的位置使用正确的CDN后，它将开始崩溃。
元素没有居中对齐，请在“从上面开始的导航栏”链接中查看如何使导航栏内容居中。
我设置了一个容器-流体，我的元素没有扩散，因为它应该。 它可以工作，也请确保不要在container-fluid内使用container-fluid，因为它会从两侧添加不必要的填充。
我希望只有我的导航链接显示当我点击汉堡菜单。 若要获得此结果，请将follaps。
请彻底检查您的代码，因为它包含许多标签，这些标签没有打开或关闭在正确的地方，试着使导航栏从开始，它将工作。
祝你好运，希望有帮助。
