Angular4导航栏升级Bootstrap3至4后无法显示问题求助

Hey Martin, let's get that navbar back up and running! The problem here is that Bootstrap 4 completely overhauled many core class names from Bootstrap 3, so your old navbar-default-based code isn't recognized by v4. Since there's no syntax error, the console stays quiet—but the navbar has no styles applied, making it invisible.

Here's how to update your code to work with Bootstrap 4 (beta/alpha 6):

Updated Navbar HTML #

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <!-- Optional: Add a brand/logo here if needed -->
    <!-- <a class="navbar-brand" href="#">Brand</a> -->
    
    <!-- Toggler for mobile view (required for responsive collapse) -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item" routerLinkActive="active">
          <a class="nav-link" routerLink="/messages"><b>Messages</b></a>
        </li>
        <li class="nav-item" routerLinkActive="active">
          <a class="nav-link" routerLink="/transformations"><b>Transformations</b></a>
        </li>
        <li class="nav-item" routerLinkActive="active">
          <a class="nav-link" routerLink="/actions"><b>Actions</b></a>
        </li>
        <li class="nav-item" routerLinkActive="active">
          <a class="nav-link" routerLink="/rules"><b>Rules</b></a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Key Changes Explained #

• Replaced navbar-default: Bootstrap 4 uses navbar-light (for light backgrounds) or navbar-dark (for dark backgrounds) paired with a color utility like bg-light or bg-dark instead of the old navbar-default/navbar-inverse.
• Added navbar-expand-lg: This ensures the navbar stays expanded on screens larger than the "lg" breakpoint (992px). Use navbar-expand to keep it expanded on all screens, or navbar-expand-sm/md for smaller breakpoints.
• Added nav-item and nav-link: Bootstrap 4 requires these classes on list items and links inside navbar-nav to apply proper spacing and styles—your old code lacked these, so the links had no visible styling.
• Added responsive toggler: If you want the navbar to collapse into a hamburger menu on mobile, the navbar-toggler button and matching data-target/id on the collapse container are required. You can omit this if you don't need responsive behavior, but it's standard for Bootstrap 4 navbars.
• Simplified routerLinkActive: Bootstrap 4's default active state uses the active class, so you can drop the current class unless you have custom styles for it.

Additional Checks #

Make sure your Angular project is properly loading Bootstrap 4 dependencies:

• If you're using Bootstrap 4 beta, you need to include jQuery and Popper.js before Bootstrap's JS (for the toggler to work).
• Double-check that your Bootstrap 4 CSS is correctly imported in your Angular project (via angular.json or a stylesheet import).

That should get your navbar showing up again with the proper Bootstrap 4 styling!

内容的提问来源于stack exchange，提问作者Martin Bamford