引导导航栏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只有部分工作

回答

相关问题