Angular 12集成Bootstrap 5时导航栏下拉菜单无法正常工作

Hey there! Let's break down the two issues you're facing with your Bootstrap 5 navbar in Angular—since you're using the CDN approach this time, a few Bootstrap 5-specific changes are tripping you up:

1. Dropdown Menu Not Expanding #

The main issue here is Bootstrap 5's updated data attribute naming convention. In Bootstrap 4, we used data-toggle and data-target, but Bootstrap 5 switched to data-bs-* prefixes for all JavaScript-related attributes to avoid conflicts with other libraries.

Your navbar toggler button is still using the old attributes:

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" ...>

Update those to the Bootstrap 5-compatible versions, and your dropdown will start responding to clicks:

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" ...>

Bootstrap 5's JS can't recognize the old attribute names, which is why your dropdown wasn't expanding before.

2. Search Bar Positioned Incorrectly #

Bootstrap 5 also revamped spacing class names to support RTL (right-to-left) layouts. The mr-auto class (margin-right: auto) has been replaced with me-auto (margin-end: auto) to be direction-agnostic.

Your navbar list uses the old class:

<ul class="navbar-nav mr-auto">

Changing that to:

<ul class="navbar-nav me-auto">

Will push the search form to the right as expected, matching the behavior you're used to from Bootstrap 4.

I also noticed your search form was using form-inline—Bootstrap 5 removed this class, replacing it with d-flex for flexbox-based alignment, which ensures proper spacing between the input and button.

Full Corrected Navbar Code #

Here's your navbar component with all fixes applied:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</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">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav me-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="d-flex">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

Quick CDN Check #

Your index.html CDN links look perfect for Bootstrap 5.1.1—you're loading both the CSS and bundled JS (which includes Popper.js, required for dropdowns and interactive components), so that part is already set up correctly.

Give these changes a try, and your navbar should work exactly as you expect!

内容的提问来源于stack exchange，提问作者Gabriela Reyes