引導導航欄列表堆疊而不是靠

我試圖執行一個基本的引導導航欄例如：引導導航欄列表堆疊而不是靠

<body> 
<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#">WebSiteName</a> 
    </div> 
    <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#">Page 1</a></li> 
     <li><a href="#">Page 2</a></li> 
     <li><a href="#">Page 3</a></li> 
    </ul> 
    </div> 
</nav> 
</body>

看看發生了什麼事在CodePen（安裝的具有引導）。爲什麼導航欄中的物品堆疊在一起，而不是坐在一起？

來源

2017-02-13 RubyNoob

您正在使用Bootstrap 4（在Codepen中）並且導航欄已更改。如果你想要一個簡單的水平（非塌陷），您需要包括navbar-toggleable-xl因爲導航欄不響應默認情況下（垂直堆疊的）..

<nav class="navbar navbar-light navbar-toggleable-xl bg-faded"> 
    <a href="/" class="navbar-brand">Brand</a> 
    <ul class="navbar-nav"> 
     <li class="nav-item active"> 
      <a class="nav-link" href="#">Link <span class="sr-only">Home</span></a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">Link</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">Link</a> 
     </li> 
    </ul> 
</nav>

演示：http://www.codeply.com/go/TVDW57B4SL

Read more in the docs

來源

2017-02-13 18:10:47 ZimSystem

希望我能接受一個以上的答案，因爲他們都是有用的。感謝鏈接到alpha文檔（我正在查看以前版本的文檔）。演示也非常有幫助！ – RubyNoob

您的代碼是正確的，但是您需要的Bootstrap版本是3.3.7版本。看起來您正試圖在您的Codepen中調用Bootstrap的更新版本。

下面是使用舊的引導你相同的代碼：

https://codepen.io/anon/pen/rjPazv

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

來源

2017-02-13 18:17:08 Staveven

謝謝你。很有用！ – RubyNoob

引導導航欄列表堆疊而不是靠

回答

相關問題