Bootstrap 3.3.6 在小分辨率下查看时导航栏项目不占据全宽

Question

我遇到了一个奇怪的问题。 JSFiddle link 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

Bootstrap 3.3.6 在小分辨率下查看时导航栏项目不占据全宽

Bootstrap 3.3.6 Nav Bar Item not taking full width when viewed in small resolution

html

css

media-queries

twitter-bootstrap-3