我的导航栏不起作用...需要帮助。 Bootstrap

-3

需要你的帮助。我正试图在学校为我们的项目网站创建一个折叠的导航栏。由于我刚开始学习bootstrap，因此我看不到我做错了什么。在此先感谢。我的导航栏不起作用...需要帮助。 Bootstrap

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <link href="../css/bootstrap.min.css" rel="stylesheet" /> 
    <link href="../css/mystyle.css" rel="stylesheet" /> 
    <title></title> 
</head> 
<body> 
    <div class="container"> 
     <div class="navbar navbar-default navbar-static-top"> 
      <div class="container"> 
      <a class="navbar-brand" href="#">Viking's Pawnshop</a> 
      <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <div class="collapse navbar-collapse navHeaderCollapse"> 
       <ul class="nav navbar-nav navbar-right" style="margin-right: 20px"> 
        <li><a href="#">Home</a></li> 
        <li><a href="#">Services</a></li> 
        <li><a href="#">Contact Us</a></li> 
        <li><a href="#">Login</a></li> 
       </ul> 
      </div> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-md-12"> 
       <div class="slide_cont"> 

        <div class="slide"> 

         <div class="1"> 
         </div> 
         <div class="2"> 
         </div> 
         <div class="3"> 
         </div> 

        </div> 
        <div class="arrows"> 
         <img src="../images/left.png" id="lft"> 
         <img src="../images/right.png" id="ryt"> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="row" style="text-align: justify;"> 
      <div class="col-md-4"> 
       What is Lorem Ipsum? 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
      </div> 
      <div class="col-md-4"> 
       What is Lorem Ipsum? 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
      </div> 
      <div class="col-md-4"> 
       What is Lorem Ipsum? 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
      </div> 
     </div> 
    </div> 

</body> 
</html>

来源

2016-07-02 Mark Xavier

“不工作”是没有问题的描述。 – Xufox

你忘了加入jquery和bootstrap.js吗？ – Lucian

需要JavaScript插件

检查文档：Navbar

您需要包括jQuery和（至少）的collapse.js插件或你的折叠导航全bootstrap.js起作用。见What's Included

jQuery的要求请注意，所有的JavaScript插件需要jQuery的被收录，如在起动模板。请参阅我们的 bower.json以查看哪些版本的jQuery受支持。

另外。

align已过时，见W3C Specs。
由于您将导航栏放置在容器内，因此您可以在navbar内部使用container-fluid，因此navbar-right链接上没有任何溢出。看到这。
您错过了.navbar-header类。

工作实例：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 

 
    <nav class="navbar navbar-default navbar-static-top"> 
 
    <div class="container-fluid"> 
 

 
     <div class="navbar-header"> 
 
     <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="#">Viking's Pawnshop</a> 
 
     </div> 
 

 
     <div class="collapse navbar-collapse navHeaderCollapse"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
      <li><a href="#">Home</a> 
 
      </li> 
 
      <li><a href="#">Services</a> 
 
      </li> 
 
      <li><a href="#">Contact Us</a> 
 
      </li> 
 
      <li><a href="#">Login</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 

 
    </div> 
 
    </nav> 
 

 
    <div class="row"> 
 
    <div class="col-md-12"> 
 
     <div class="slide_cont"> 
 
     <div class="slide"> 
 
      <div class="1"> 
 
      </div> 
 
      <div class="2"> 
 
      </div> 
 
      <div class="3"> 
 
      </div> 
 
     </div> 
 
     <div class="arrows"> 
 
      <img src="http://placehold.it/150x150" id="lft"> 
 
      <img src="http://placehold.it/150x150" id="ryt"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div class="row"> 
 
    <div class="col-md-4"> 
 
     What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type 
 
     specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more 
 
     recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
    </div> 
 
    <div class="col-md-4"> 
 
     What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type 
 
     specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more 
 
     recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
    </div> 
 
    <div class="col-md-4"> 
 
     What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type 
 
     specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more 
 
     recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
    </div> 
 
    </div> 
 

 
</div> 
 
<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>

来源

2016-07-02 15:39:44 vanburen

谢谢@vanburen。 –

不客气，不要忘记标记为回答问题（如果是），以便其他人可以从中受益。 – vanburen

我的导航栏不起作用...需要帮助。 Bootstrap

回答

相关问题