导航栏没有完全正确地折叠

Question

我有一个如下所示的导航栏：

当我尝试缩小页面以模拟移动设备时，它并没有完全正确地折叠：

它应该折叠，以便隐藏在“注册”文本后面的按钮成为菜单的切换按钮。这是我的代码：

<div class="sticky-header-navbar-container">
    <div class="well">
        <div class="navbar navbar-default navbar-fixed-top navbar-collapse navHeaderCollapse" id="navbar">
            <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
                <span class="icon-bar"><a href="index.html">Home</a></span>
                <span class="icon-bar"><a href="#" data-toggle="modal" data-target="#about-modal">About</a></span>
                <span class="icon-bar"><a href="#" data-toggle="modal" data-target="#contact-modal">Contact</a></span>
                <span class="icon-bar"><a href="playground.html" class="tooltip-bottom" data-tooltip="Only here while under development.">Playground</a></span>
                <span class="icon-bar"><a href="#" data-toggle="modal" data-target="#login-modal">Login</a></span>
                <span class="icon-bar"><a href="#" class="tooltip-bottom" data-toggle="modal" data-target="#registration-modal"
                                          data-tooltip="Only Required to Comment and Rate!">Want to Register? Click Here!</a></span>
            </button>
            <ul class="nav navbar-nav">
                <li>
                    <a href="index.html">Home</a>
                </li>
                <li>
                    <a href="#" data-toggle="modal" data-target="#about-modal">About</a>
                </li>
                <li>
                    <a href="#" data-toggle="modal" data-target="#contact-modal">Contact</a>
                </li>
                <li>
                    <a href="playground.html" class="tooltip-bottom" data-tooltip="Only here while under development.">Playground</a>
                </li>
                <li>
                    <form class="navbar-form" role="search">
                        <div class="input-group" style="width: 100%">
                            <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term-header">
                            <div class="input-group-btn">
                                <button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span></button>
                            </div>
                        </div>
                    </form>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a href="#" data-toggle="modal" data-target="#login-modal">Login</a>
                </li>
                <li style="padding-right: 20px">
                    <a href="#" class="tooltip-bottom" data-toggle="modal" data-target="#registration-modal"
                       data-tooltip="Only Required to Comment and Rate!">Want to Register? Click Here!</a>
                </li>
            </ul>
        </div>
    </div>
</div>
<div id="about-modal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">About This Page</h4>
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<div id="contact-modal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Contact Us!</h4>
            </div>
            <div class="modal-body">
                <p>Got any Feedback (Positive and/or Negative) or any ideas? Please let us know!</p>
                <p>Your email is only used to contact you back with an answer. We will never spam your email (Promise!)</p>
                <div class="form-group">
                    <form role="form">
                        <div class="form-group">
                            <label for="contact-name" class="sr-only">Your Name</label>
                            <input type="text" id="contact-name" class="form-control" placeholder="Your Name" required>
                        </div>
                        <div class="form-group">
                            <label for="contact-email" class="sr-only">Your Email</label>
                            <input type="email" id="contact-email" class="form-control" placeholder="Your Email" required>
                        </div>
                        <div class="form-group">
                            <textarea id="contact-message" class="form-control" rows="6" cols="50" placeholder="Your message..." required></textarea>
                        </div>
                        <button type="button" class="btn btn-success btn-bg" id="contact-submit-btn"><span>Submit</span></button>
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<div id="login-modal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Login with Github!</h4>
            </div>
            <div class="modal-body">
                <form class="navbar-form">
                    <label for="login-inputEmail" class="sr-only">Email address</label>
                    <input type="email" id="login-inputEmail" class="form-control" placeholder="Email Address" required>
                    <label for="inputPassword" class="sr-only">Password</label>
                    <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
                    <div class="separator" style="padding-bottom: 15px"></div>
                    <div class="checkbox" style="padding-right: 15px;padding-left: 10px">
                        <label>
                            <input type="checkbox" value="remember-me">
                            Remember Me
                        </label>
                    </div>
                    <button type="button" class="btn btn-success btn-bg" id="signin-btn"><span class="glyphicon glyphicon-log-in"></span></button>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<div id="registration-modal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">How To Register</h4>
            </div>
            <div class="modal-body">
                <p>In order to log in you need a Github account as we use that for log in here.</p>
                <p>If you already registered for a Github account then press the Login button and log in using your Github Credentials.</p>
                <p>If you have yet to register <a href="https://github.com/join">Click Here!</a></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Answer 1

如果这就是所有相关代码，那么您应该不需要默认类之外的任何东西。

见Default Navbar文档。

您不应该在标题中需要这些模式链接，然后在导航栏链接中再次使用这些模式链接，这些是覆盖移动切换按钮的内容。

并且您的 HTML 结构已关闭和/或缺少一些部分。同样，如果您参考文档，您会看到不一致之处，您需要将切换按钮放在 navbar-header 类中，navbar-form 不属于 li 项目等。

查看工作示例片段。

*请注意，由于您的链接在 875 像素左右占用了大量空间，您会看到导航栏溢出到新行（在我的示例中发生这种情况时，CSS 媒体查询会将背景变为红色）。一种解决方案是减少链接标题的长度以防止这种情况发生：

即想注册？点击这里！只需注册！。

@media (max-width: 875px) {
  html,
  body {
    background: red;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navHeaderCollapse" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button>
    </div>
    <div class="collapse navbar-collapse navHeaderCollapse">
      <ul class="nav navbar-nav">
        <li> <a href="index.html">Home</a>

        </li>
        <li> <a href="#" data-toggle="modal" data-target="#about-modal">About</a>

        </li>
        <li> <a href="#" data-toggle="modal" data-target="#contact-modal">Contact</a>

        </li>
        <li> <a href="playground.html" class="tooltip-bottom" data-tooltip="Only here while under development.">Playground</a>

        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term-header"> <span class="input-group-btn">
                        <button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span>

          </button>
          </span>
        </div>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li> <a href="#" data-toggle="modal" data-target="#login-modal">Login</a>

        </li>
        <li> <a href="#" class="tooltip-bottom" data-toggle="modal" data-target="#registration-modal" data-tooltip="Only Required to Comment and Rate!">Want to Register? Click Here!</a>

        </li>
      </ul>
    </div>
  </div>
</nav>
<div id="about-modal" class="modal fade" role="dialog">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">About This Page</h4>

      </div>
      <div class="modal-body"></div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<div id="contact-modal" class="modal fade" role="dialog">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Contact Us!</h4>

      </div>
      <div class="modal-body">
        <p>Got any Feedback (Positive and/or Negative) or any ideas? Please let us know!</p>
        <p>Your email is only used to contact you back with an answer. We will never spam your email (Promise!)</p>
        <div class="form-group">
          <form role="form">
            <div class="form-group">
              <label for="contact-name" class="sr-only">Your Name</label>
              <input type="text" id="contact-name" class="form-control" placeholder="Your Name" required>
            </div>
            <div class="form-group">
              <label for="contact-email" class="sr-only">Your Email</label>
              <input type="email" id="contact-email" class="form-control" placeholder="Your Email" required>
            </div>
            <div class="form-group">
              <textarea id="contact-message" class="form-control" rows="6" cols="50" placeholder="Your message..." required></textarea>
            </div>
            <button type="button" class="btn btn-success btn-bg" id="contact-submit-btn"><span>Submit</span>

            </button>
          </form>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<div id="login-modal" class="modal fade" role="dialog">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Login with Github!</h4>

      </div>
      <div class="modal-body">
        <form class="navbar-form">
          <label for="login-inputEmail" class="sr-only">Email address</label>
          <input type="email" id="login-inputEmail" class="form-control" placeholder="Email Address" required>
          <label for="inputPassword" class="sr-only">Password</label>
          <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
          <div class="separator" style="padding-bottom: 15px"></div>
          <div class="checkbox" style="padding-right: 15px;padding-left: 10px">
            <label>
              <input type="checkbox" value="remember-me">Remember Me</label>
          </div>
          <button type="button" class="btn btn-success btn-bg" id="signin-btn"><span class="glyphicon glyphicon-log-in"></span>

          </button>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<div id="registration-modal" class="modal fade" role="dialog">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">How To Register</h4>

      </div>
      <div class="modal-body">
        <p>In order to log in you need a Github account as we use that for log in here.</p>
        <p>If you already registered for a Github account then press the Login button and log in using your Github Credentials.</p>
        <p>If you have yet to register <a href="https://github.com/join">Click Here!</a>

        </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>