引導程序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> 

當我調整了移動設備的網頁，並嘗試切換可摺疊的導航欄，我看到導航項目只佔用了內容，而不是立寬的寬度。

我試圖調試並且無法解決問題。我遵循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