Bootstrap 3.3.7 Scrollspy：移除框高亮，仅保留文本高亮

Got it, let's sort this out for you! You’ve already got Scrollspy up and running with Bootstrap 3.3.7—great job. The issue here is that Bootstrap’s default styling for active navbar links includes a background "box" highlight alongside the text color change. To keep only the text active state and ditch the box, you just need to override those default styles with custom CSS.

Here’s what to do:

• Add custom CSS after Bootstrap’s stylesheet (this is crucial so your rules take precedence):

  /* Override Bootstrap 3's active nav item box highlight */
  .navbar-nav > .active > a,
  .navbar-nav > .active > a:hover,
  .navbar-nav > .active > a:focus {
      background-color: transparent; /* Removes the background box */
      /* Optional: Adjust text color if needed (use your desired active color) */
      /* color: #2c3e50; */
  }
  

Quick Notes: #

• If you’re using the .navbar-inverse variant, adjust the selector to target inverse navs specifically:

  .navbar-inverse .navbar-nav > .active > a,
  .navbar-inverse .navbar-nav > .active > a:hover,
  .navbar-inverse .navbar-nav > .active > a:focus {
      background-color: transparent;
  }
  

• Leave the color property commented out if you want to keep Bootstrap’s default active text color—we’re only removing the background box here.
• Make sure your custom CSS file is loaded after Bootstrap’s core CSS file in your HTML, otherwise the default styles will still apply.

That’s it! Your Scrollspy will now only highlight the active nav text without the box background.

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