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

Bootstrap 3.3.6导航栏以小分辨率查看时没有占据全宽的项目

1 个答案: