我的引导导航栏的响应能力很差。我希望导航栏在桌面上显示一行中的所有按钮，并且随着视口变小，它们可以折叠在fas fa bar导航栏开关下。
所有必需的样式表和脚本都已链接。
我做错了什么？
<body>
<!-- Header -->
<header class="header">
<div class="container">
<!-- Navbar -->
<nav class="navbar sticky-top">
<a href="" class="navbar-brand">
<img class="huisie-logo" src="./Assets/Home logo with text yellow.svg" height="50" alt="Huisie Logo" loading="lazy">
</a>
<button class="navbar-toggler" type="button" data-mdb-toggle="collapse" data-mdb-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<div class="nav-item d-flex flex-column">
<button type="button" class="btn btn-link text-dark px-3 me-auto nav-item m-2">
Find room
</button>
<button type="button" class="btn btn-link text-dark px-3 me-auto nav-item m-2">
Make listing
</button>
<button type="button" class="btn btn-link text-dark px-3 me-auto nav-item m-2">
Sign up
</button>
<button type="button" class="btn btn-link px-3 me-auto text-warning nav-item m-2">
Log In
</button>
</div>
</div>
</nav>
<!-- Navbar -->
</div>
</header>
<!-- /Header -->
应为data-bs-target和data-bs-toggle
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<body>
<!-- Header -->
<header class="header">
<div class="container">
<!-- Navbar -->
<nav class="navbar sticky-top">
<a href="" class="navbar-brand">
<img class="huisie-logo" src="./Assets/Home logo with text yellow.svg" height="50" alt="Huisie Logo" loading="lazy">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<div class="nav-item d-flex flex-column">
<button type="button" class="btn btn-link text-dark px-3 me-auto nav-item m-2">
Find room
</button>
<button type="button" class="btn btn-link text-dark px-3 me-auto nav-item m-2">
Make listing
</button>
<button type="button" class="btn btn-link text-dark px-3 me-auto nav-item m-2">
Sign up
</button>
<button type="button" class="btn btn-link px-3 me-auto text-warning nav-item m-2">
Log In
</button>
</div>
</div>
</nav>
<!-- Navbar -->
</div>