为什么Bootstrap Navbar不能折叠？

-3

我几乎在使用精确的W3schools示例来折叠navbars，但它不工作。我敢肯定，我忽略了一些东西，但似乎无法指出它。附加的是我的HTML代码。干杯!为什么Bootstrap Navbar不能折叠？

<script type="text/javascript" src="assets/js/modernizr.min.js"></script> 
 
\t <script type="text/javascript" > 
 
\t  openTab("Home") 
 

 
\t \t function openTab(tabName) { 
 
\t \t var i; 
 
\t \t var x = document.getElementsByClassName("tab"); 
 
\t \t for (i = 0; i < x.length; i++) { 
 
\t \t  x[i].style.display = "none"; 
 
\t \t } 
 
\t \t document.getElementById(tabName).style.display = "block"; 
 
\t \t } 
 
</script> 
 
\t \t \t

<nav class="navbar navbar-inverse navbar-fixed-top"> 
 
     <div class="container-fluid"> 
 
     <div class="navbar-header"> 
 
     \t <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
 
\t \t   <span class="sr-only">Menu</span> 
 
\t \t   <span class="icon-bar"></span> 
 
\t \t   <span class="icon-bar"></span> 
 
\t \t   <span class="icon-bar"></span> 
 
     \t \t </button> 
 
      <a class="navbar-brand" href="#">Company Name</a> 
 
     </div> 
 
      <div class="navbar-collapse collapse" id="myNavbar"> 
 
\t \t   <ul class="nav navbar-nav navbar-right"> 
 
\t \t   <li><a href="#" onclick="openTab('Home')">Home</a></li> 
 
\t \t   <li><a href="#" onclick="openTab('About')">About Us</a></li> 
 
\t \t   <li><a href="#" onclick="openTab('Products')">Products</a></li> 
 
\t \t   <li><a href="#" onclick="openTab('Contact')">Contact Us</a></li> 
 
\t \t   </ul> 
 
\t  </div> 
 
    </div> 
 
    </nav>

来源

2016-09-27 PS97

这里的HTML只是故事的1/3。你能用所需的JavaScript和CSS制作CodePen吗？ –

我添加了一点JavaScript，我用它来隐藏所有其他divs，当点击一个标签时，即点击'关于'隐藏除'关于'之外的所有div。至于CSS，它只是基本的引导样式根本没有修改它。 – PS97

Hi @ PS97，你应该在同一个片段中包含你的JS。 –

您所提供的代码片段是正确的。这个问题背后的主要原因将是缺少引导程序或jQuery文件。请包含以下行，并请重新运行代码。

<head> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head>

来源

2016-09-27 05:17:50 Nitheesh

我可以发誓我正确链接bootstrap ...感觉很愚蠢哈哈非常感谢您的帮助！ :) – PS97

酷继续前进:) – Nitheesh

你应该包括适当<head>标签。下面的代码应该很好地工作：

<head> 
 
    <title>Bootstrap Case</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 

 

 
<nav class="navbar navbar-inverse navbar-fixed-top"> 
 
     <div class="container-fluid"> 
 
     <div class="navbar-header"> 
 
     \t <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
 
\t \t   <span class="sr-only">Menu</span> 
 
\t \t   <span class="icon-bar"></span> 
 
\t \t   <span class="icon-bar"></span> 
 
\t \t   <span class="icon-bar"></span> 
 
     \t \t </button> 
 
      <a class="navbar-brand" href="#">Company Name</a> 
 
     </div> 
 
      <div class="navbar-collapse collapse" id="myNavbar"> 
 
\t \t   <ul class="nav navbar-nav navbar-right"> 
 
\t \t   <li><a href="#" onclick="openTab('Home')">Home</a></li> 
 
\t \t   <li><a href="#" onclick="openTab('About')">About Us</a></li> 
 
\t \t   <li><a href="#" onclick="openTab('Products')">Products</a></li> 
 
\t \t   <li><a href="#" onclick="openTab('Contact')">Contact Us</a></li> 
 
\t \t   </ul> 
 
\t  </div> 
 
    </div> 
 
    </nav>

来源

2016-09-27 05:14:55

只需复制，粘贴，替换您的内容它的正常工作。很可能你缺少引导文件。

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Case</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 
    <nav class="navbar navbar-inverse navbar-fixed-top"> 
 
    <div class="container-fluid"> 
 
     <div class="navbar-header"> 
 
    \t <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
 
\t   <span class="sr-only">Menu</span> 
 
\t   <span class="icon-bar"></span> 
 
\t   <span class="icon-bar"></span> 
 
\t   <span class="icon-bar"></span> 
 
    \t \t </button> 
 
     <a class="navbar-brand" href="#">Company Name</a> 
 
     </div> 
 
     <div class="navbar-collapse collapse" id="myNavbar"> 
 
\t   <ul class="nav navbar-nav navbar-right"> 
 
\t   <li><a href="#" onclick="openTab('Home')">Home</a></li> 
 
\t   <li><a href="#" onclick="openTab('About')">About Us</a></li> 
 
\t   <li><a href="#" onclick="openTab('Products')">Products</a></li> 
 
\t   <li><a href="#" onclick="openTab('Contact')">Contact Us</a></li> 
 
\t   </ul> 
 
     </div> 
 
    </div> 
 
    </nav> 
 
</body> 
 
</html>

来源

2016-09-27 05:15:18 aavrug

干杯aavrug所有排序:) – PS97

包括这4条线到你的头标记

<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> 
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

来源

2016-09-27 05:24:57 webDsynr

为什么Bootstrap Navbar不能折叠？

回答

相关问题