以小分辨率查看时，Bootstrap 3.3.6 导航栏项目未占用全宽

Question

我遇到了一个奇怪的问题。 JSFiddle链接https://jsfiddle.net/p2d2m72z/

<nav class="navbar navbar-default navbar-static-top navbar-inverse">
  <div class="navbar-header">
    <a class="navbar-brand " href="#">
      Website
    </a>
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#home-menu" 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" id="home-menu">
    <ul class="nav navbar-nav">
      <li class="active"><a class="navbar-brand">Home</a></li>
      <li><a class="navbar-brand" href="#">Menu 1</a></li>
      <li><a class="navbar-brand" href="#">Menu 2</a></li>
      <li><a class="navbar-brand" href="#">Menu 3</a></li>
      <li><a class="navbar-brand" href="#">Menu 4</a></li>
    </ul>
  </div>
</nav>
<div class="container-fluid">Hello World</div>

当我为移动设备调整页面大小并尝试切换可折叠导航栏时，我看到导航项仅占用内容的宽度而不是 li 宽度。

我尝试调试但无法解决问题。我遵循了 W3Schools 教程，它运行良好：http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_navbar_collapse&stacked=h

我错过了什么吗？

Answer 1

只需从锚标记中删除 class="navbar-brand" 即可获得预期的输出。

<nav class="navbar navbar-default navbar-static-top navbar-inverse">
  <div class="navbar-header">
    <a class="navbar-brand " href="#">
      Website
    </a>
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#home-menu" 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" id="home-menu">
    <ul class="nav navbar-nav">
      <li class="active"><a >Home</a></li>
      <li><a  href="#">Menu 1</a></li>
      <li><a  href="#">Menu 2</a></li>
      <li><a  href="#">Menu 3</a></li>
      <li><a  href="#">Menu 4</a></li>
    </ul>
  </div>
</nav>
<div class="container-fluid">Hello World</div>

Fiddle