Hey there! Let's tackle that Bootstrap 3 navbar toggle button issue you're stuck on—those sr-only elements can be confusing at first, but I’ll break it down clearly.

What’s the purpose of this button? #

• The sr-only (screen-reader only) class is a Bootstrap accessibility feature. It hides content from sighted users but keeps it visible for assistive technologies like screen readers.
• That specific toggle button is meant to appear only on mobile/small screen sizes (when the navbar collapses into a hamburger menu). It lets mobile users expand or collapse the full list of navigation links.

Why is it showing up incorrectly? #

From your description, this usually happens due to one of these common issues:

• Your navbar markup is missing critical Bootstrap wrapper classes (like navbar-header or the collapse container) that control when the toggle button shows/hides based on screen width.
• Custom CSS you’ve added is overriding Bootstrap’s default styles for sr-only or the navbar toggle, forcing it to display when it shouldn’t.
• The overall navbar structure doesn’t follow Bootstrap 3’s required hierarchy.

How to fix the display (and hide it properly) #

First, make sure your navbar uses Bootstrap 3’s standard, responsive structure. Here’s a corrected version based on your code snippet:

<!--====NAVBAR====-->
<nav class="navbar navbar-default"> <!-- Don't skip the base navbar class! -->
  <div class="container">
    <!-- Navbar Header (holds toggle button and brand) -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Your Site Brand</a>
    </div>

    <!-- Collapsible Navigation Links -->
    <div class="collapse navbar-collapse" id="navbar-collapse">
      <ul class="nav navbar-nav">
        <!-- Add your navigation links here -->
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
      </ul>
    </div>
  </div>
</nav>

If it’s still misbehaving:

1. Check for custom CSS conflicts: Look for styles targeting .sr-only or .navbar-toggle that might be setting display: block or removing visibility rules. Bootstrap’s default sr-only styles should look like this:

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

2. Verify Bootstrap CSS load order: Make sure the Bootstrap 3 stylesheet loads before your custom CSS—this prevents your styles from accidentally overriding core Bootstrap rules.
3. Force hide (last resort): If you’re building a non-responsive site and want to remove the toggle entirely (note: this hurts accessibility and mobile usability), add this custom CSS:

.navbar-toggle {
  display: none !important;
}

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