Bootstrap固定的导航栏在滚动时不会保持页面宽度吗？

Question

我的引导导航栏固定在页面顶部，它是页面的宽度，如下图所示。

但是，当我向下滚动页面时，固定的导航栏会突然更改大小，不再是页面的宽度。我该如何解决？

这是我的导航栏的代码：

    <nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="0">
          <lik rel="stylesheet" href="main.css">

  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-3">
        <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="userProfile1">Home</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="navbar-collapse-3">
      <ul class="nav navbar-nav navbar-right">

        <li><a href="/calendar">Calendar</a></li>
        <li><a href="/subjectSearch">Search</a></li>
        <li><a href="/logout">Logout</a></li>

      </ul>

      </div> 
    </div>
  </div>
</nav>

Answer 1

尝试使用：

<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    ...
  </div>
</nav>

引用：https://getbootstrap.com/docs/3.3/components/#navbar

Answer 2

您能否在代码中添加类似navbar-fixed-top的类。

<nav class="navbar navbar-default navbar-fixed-top">

    ...