Bootstrap導航欄顯示爲垂直列表...？

因此，我正在線上學習一個教程（http://www.sitepoint.com/twitter-bootstrap-tutorial-handling-complex-designs/）並嚴格遵循代碼，但出於某種原因，我的導航欄並未按照應有的方式顯示。我的朋友（誰是更有經驗的網絡開發人員）快速查看了代碼，並找不出錯在哪裏。所以我想我會在這裏發佈我的問題。Bootstrap導航欄顯示爲垂直列表...？

html code (left), actual page (right)

我也會告訴你我的工作目錄（以防萬一你想知道如果這些文件都在同一個目錄）：

enter image description here

這裏的代碼如果你想嘗試一下自己

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>My bootstrap</title> 
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> 
</head> 
<body> 

    <div class="container"> 
     <h1><a href="#">Bootstrap Site</a></h1> 
     <div class="navbar"> 
      <div class="navbar-inner"> 
       <div class="container"> 
        <ul class="nav"> 
         <li class="active"><a href="#">Home</a></li> 
         <li><a href="#">Projects</a></li> 
         <li><a href="#">Services</a></li> 
         <li><a href="#">Downloads</a></li> 
         <li><a href="#">About</a></li> 
         <li><a href="#">Contact</a></li> 
        </ul> 
       </div> 
      </div> 
     </div> 


    </div> 

    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
    <script src="js/bootstrap.js"></script> 
</body>

來源

2014-02-22 FateNuller

您使用的是Bootstrap版本？ – Sebsemillia

我假裝你正在使用最新的Bootstrap。

您必須添加navbar-default到您的<div class="navbar">和navbar-nav到您的<ul class="nav">。

哪給你下面的標記。

<div class="container"> 
    <h1><a href="#">Bootstrap Site</a></h1> 
    <div class="navbar navbar-default"> 
    <div class="navbar-inner"> 
     <div class="container"> 
     <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#">Projects</a></li> 
      <li><a href="#">Services</a></li> 
      <li><a href="#">Downloads</a></li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Contact</a></li> 
     </ul> 
    </div> 
</div>

Working Example

對於未來的問題，試着問這裏之前閱讀官方引導文件。他們解釋了一切非常詳細。

BT Navbar

我猜你的問題是，該sitepoint教程使用的舊版本引導，比你下載了一個和使用。

來源

2014-02-22 19:03:01 Sebsemillia

我仍然使用cdn's進行垂直升降）： – Snickers3192

@ Snickers3192您是如何解決這個問題的？即時面臨這個目前.. –

男子我甚至不記得認爲我只是抹了一切，做了別的事情 – Snickers3192

在我來說，我是想互聯網上的一些代碼，我發現基於引導3版，但我的應用程序是基於自舉版本4。這兩個版本之間存在重要差異（請參閱here）。

基於V4下面的代碼工作對我來說：

<nav class="navbar navbar-expand-lg navbar-light bg-light"> 
    <a class="navbar-brand" href="#">Navbar</a> 
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon"></span> 
    </button> 

    <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
    <ul class="navbar-nav mr-auto"> 
     <li class="nav-item active"> 
     <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link" href="#">Link</a> 
     </li> 
     <li class="nav-item dropdown"> 
     <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
      Dropdown 
     </a> 
     <div class="dropdown-menu" aria-labelledby="navbarDropdown"> 
      <a class="dropdown-item" href="#">Action</a> 
      <a class="dropdown-item" href="#">Another action</a> 
      <div class="dropdown-divider"></div> 
      <a class="dropdown-item" href="#">Something else here</a> 
     </div> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link disabled" href="#">Disabled</a> 
     </li> 
    </ul> 
    <form class="form-inline my-2 my-lg-0"> 
     <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> 
     <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> 
    </form> 
    </div> 
</nav>

的官方文檔可以發現here。

來源

2018-02-07 02:51:08 Malick

我有一個使用bootstrap v4的類似問題。以前的答案代碼對我來說效果不錯，但只是想澄清一下，使垂直導航欄水平的部分是在主div標記中使用navbar-expand-lg。

<nav class="navbar navbar-expand-lg">

根據您的屏幕尺寸偏好，將lg更改爲其他尺寸（md，sm或xs）也很有幫助。

希望這會有幫助

來源

2018-02-26 08:09:20

Bootstrap導航欄顯示爲垂直列表...？

回答

相關問題