Bootstrap 4导航栏active类问题：链接无法显示激活状态求助

Hey there! Let's tackle that frustrating issue where your Bootstrap 4 navbar link won't display the active state. I've run into this a few times myself, so here are the most common fixes to try:

1. Double-Check Your Link Class Names #

First off, it looks like your <a> tag's class was cut off (class="na...)—this is probably the main issue! Bootstrap 4 requires navigation links to have the nav-link class to apply proper styles, including the active state.

Make sure your code follows this correct structure:

<div>
  <hr>
  <nav class="container-fluid navbar navbar-expand-sm bg-dark navbar-dark" style="padding-left: 75px; margin-top: -16px;">
    <ul class="navbar-nav">
      <li class="active nav-item">
        <a class="nav-link" href="/your-home-path">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/about-page">About</a>
      </li>
    </ul>
  </nav>
</div>

Notice the <a> tag has the required nav-link class, and the active list item combines nav-item and active—this is Bootstrap 4's standard setup for navbar links.

2. Verify Bootstrap CSS is Loaded Correctly #

If your class names are right, double-check that Bootstrap 4's CSS is properly included in your page. If the CSS file is missing, has a broken path, or you accidentally loaded Bootstrap 5 instead, the active state styles won't apply.

You can confirm this by opening your browser's dev tools (F12), selecting the active nav item in the "Elements" tab, and checking if Bootstrap's .nav-item.active .nav-link styles appear in the "Styles" panel.

3. Check for Custom Style Conflicts #

Sometimes your own custom CSS might override Bootstrap's active state styles. For example, if you've set a custom color or background for .nav-link, it could cover up the default active styling.

Use dev tools to inspect the active link—look for styles that are crossed out (meaning they're being overridden). If you find a conflict, target the active state explicitly in your custom CSS:

.navbar-nav .nav-item.active .nav-link {
  color: #fff; /* Your preferred active text color */
  background-color: rgba(255,255,255,0.1); /* Example active background */
}

4. Add Dynamic Active State for Multi-Page Sites #

If you're navigating between different pages, the static active class in your HTML will only work for the initial page. To make the active state update automatically when users switch pages, add a bit of JavaScript at the bottom of your page (right before </body>):

// Get the current page's path
const currentPage = window.location.pathname;

// Loop through all nav links to match the current page
document.querySelectorAll('.navbar-nav .nav-link').forEach(link => {
  if (link.getAttribute('href') === currentPage) {
    // Add active class to the parent nav item
    link.parentElement.classList.add('active');
  }
});

Give these steps a try—chances are one of them will get your active nav link working as expected!

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