引導導航欄CSS只有部分工作

我有這個奇怪的問題，即自舉3.3.6 CSS只是部分工作。雖然我相信該網站已經正確構建（合適的地方有正確的課程等），但看起來像一些CSS根本不存在。引導導航欄CSS只有部分工作

這是我的導航欄的樣子：

這裏是我的網頁的代碼。鏈接到CSS和JS的確有用，而且我也沒有做任何修改。這是從Bootstrap站點直接下載的。

的問題仍然存在，如果我取代鏈接到MaxCDN的CSS文件鏈接到我的服務器端CSS。

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="/style/css/bootstrap.css"> 
    <link rel="stylesheet" href="/style/css/bootstrap-theme.css"> 

    <title>Test Page</title> 
</head> 

<body> 
    <nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container"> 
     <div class="navbar-header"> 
     <a class="navbar-brand" href="#">Test Page</a> 
     <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     </div> 
     <div id="navbar" class="collapse navbar-collapse"> 
     <ul class="navbar navbar-nav navbar-left"> 
      <li><a href="#">Home</a> 
      </li> 
      <li><a href="">Link</a> 
      </li> 
      <li class="dropdown"> 
      <a class="dropdown-toggle nolink-pointer" data-toggle="dropdown">Dropdown 1 <b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
       <li><a href="">Link</a> 
       </li> 
      </ul> 
      </li> 
      <li class="dropdown"> 
      <a class="dropdown-toggle nolink-pointer" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
       <li><a href="">Link</a> 
       </li> 
      </ul> 
      </li> 
      <li class="dropdown"> 
      <a class="dropdown-toggle nolink-pointer" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
       <li><a href="">Link</a> 
       </li> 
      </ul> 
      </li> 
      <li class="dropdown"> 
      <a class="dropdown-toggle nolink-pointer" data-toggle="dropdown">Dropdown 4 <b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
       <li><a href="">Link</a> 
       </li> 
      </ul> 
      </li> 
      <li><a href="">Link</a> 
      </li> 
      <li><a href="">Link</a> 
      </li> 
     </ul> 
     </div> 
    </div> 
    </nav> 
    <div class="container"> 
    <p>Test</p> 
    </div> 
    <footer class="footer"> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
    <script type="text/javascript" src="/style/js/bootstrap.min.js"></script> 
    </footer> 
</body> 

</html>

來源

2016-02-13 Flawedspirit

你有<ul class="navbar navbar-nav navbar-left">，它應該是nav，不navbar的ul內。見Navbar。 <ul class="nav navbar-nav navbar-left">

*請注意，因爲你有這麼多的鏈接，你會看到他們在下面溢出992px。

旁註：考慮將你的腳本，你的結束標記之前，內部沒有你footer標籤。

<footer class="footer"> 
</footer> 

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
    <script type="text/javascript" src="/style/js/bootstrap.min.js"></script> 

</body>

在全頁面上看到工作示例。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-inverse navbar-fixed-top"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 
     <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar"> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="#">Test Page</a> 
 
    </div> 
 
    <div id="navbar" class="collapse navbar-collapse"> 
 
     <ul class="nav navbar-nav navbar-left"> 
 
     <li><a href="#">Home</a> 
 
     </li> 
 
     <li><a href="">Link</a> 
 
     </li> 
 
     <li class="dropdown"> 
 
      <a class="dropdown-toggle nolink-pointer" data-toggle="dropdown">Dropdown 1 <b class="caret"></b></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="">Link</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li class="dropdown"> 
 
      <a class="dropdown-toggle nolink-pointer" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="">Link</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li class="dropdown"> 
 
      <a class="dropdown-toggle nolink-pointer" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="">Link</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li class="dropdown"> 
 
      <a class="dropdown-toggle nolink-pointer" data-toggle="dropdown">Dropdown 4 <b class="caret"></b></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="">Link</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="">Link</a> 
 
     </li> 
 
     <li><a href="">Link</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav> 
 
<div class="container"> 
 
    <p>Test</p> 
 
</div>

來源

2016-02-13 18:16:05 vanburen

你缺少類資產淨值

<ul class="navbar navbar-nav navbar-left">

你應該有導航，而不是導航欄。正確的是：

<ul class="nav navbar-nav navbar-left">

來源

2016-02-13 18:15:57

可能包括外部CSS即customStyle.css中：

創建並上傳到customStyle.css中的路徑和風格，你想顯示什麼輸出，例如：

ul.navbar-nav { padding: 20px 0; font-size: 12pt; color:#fff; } 
ul.navbar-nav li { padding: 5px 20px; } 
ul.navbar-nav li:hover { background:#fff; }

：d

來源

2016-02-13 18:16:37

引導導航欄CSS只有部分工作

回答

相關問題