我一直试图让导航栏崩溃来打开和关闭，但它无法正常工作。我确保在bootstrap.min.js之前包含jQuery。我不知道在哪里可以看。
的index.html
{% extends "home/base.html" %}
{% load staticfiles %}
{% block header %}
{% endblock %}
{% block content %}
<div class="wrapper">
<!--=== Header v6 ===-->
<div class="header-v6 header-white-transparent header-sticky">
<!-- Navbar -->
<div class="navbar mega-menu" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="menu-container">
<button type='button' class='navbar-toggle' data-toggle='dropdown' data-target='#myNavbar'>
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Navbar Brand -->
<div class="navbar-brand">
<a href="">
<img class="default-logo" src="assets/img/logo3-light.png" alt="Logo">
<img class="shrink-logo" src="assets/img/logo3-dark.png" alt="Logo">
</a>
</div>
<!-- ENd Navbar Brand -->
<!-- Header Inner Right -->
<div class="header-inner-right">
<ul class="menu-icons-list">
<li class="menu-icons">
<i class="menu-icons-style search search-close search-btn fa fa-search"></i>
<div class="search-open">
<input type="text" class="animated fadeIn form-control" placeholder="Start searching ...">
</div>
</li>
</ul>
</div>
<!-- End Header Inner Right -->
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="myNavbar">
<div class="menu-container">
<ul class="nav navbar-nav">
<!-- Home -->
<li class="dropdown active">
<a href="/">Home</a>
</li>
<!-- End Home -->
<!-- Home -->
<li>
<a href="about" class="dropdown active">About Us</a>
</li>
<!-- End Home -->
<!-- Home -->
<li>
<a href="/" class="dropdown active">Rockets</a>
</li>
<!-- End Home -->
<!-- Home -->
<li>
<a href="/" class="dropdown active">Ballistics</a>
</li>
<!-- End Home -->
<!-- Home -->
<li>
<a href="/" class="dropdown active">Space</a>
</li>
<!-- End Home -->
</ul>
</div>
</div><!--/navbar-collapse-->
</div>
</div>
<!-- End Navbar -->
</div>
<!--=== End Header v6 ===-->
<!-- Interactive Slider v2 -->
<div class="interactive-slider-v2 img-v4">
<div class="container">
<h1>Test Splash</h1>
<p>Fully responsive test template.</p>
</div>
</div>
<!-- End Interactive Slider v2 -->
<!--=== Content ===-->
<div class="content-md">
<div class="container">
<!-- Service Box -->
<div class="row text-center margin-bottom-60">
<div class="col-md-4 md-margin-bottom-50">
<img class="image-md margin-bottom-20" src="assets/img/icons/flat/01.png" alt="">
<h1 class="title-v3-md margin-bottom-10">Fully Responsive</h1>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cur modo, tortor mauris con</p>
</div>
<div class="col-md-4 flat-service md-margin-bottom-50">
<img class="image-md margin-bottom-20" src="assets/img/icons/flat/02.png" alt="">
<h2 class="title-v3-md margin-bottom-10">HTML5 + CSS3</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cur modo, tortor mauris con</p>
</div>
<div class="col-md-4 flat-service">
<img class="image-md margin-bottom-20" src="assets/img/icons/flat/03.png" alt="">
<h2 class="title-v3-md margin-bottom-10">Launch Ready</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cur modo, tortor mauris con</p>
</div>
</div>
<!-- End Service Box -->
</div><!--/container -->
<!-- Link List -->
<div class="col-md-3 md-margin-bottom-40">
<div class="headline"><h2>Useful Links</h2></div>
<ul class="list-unstyled link-list">
<li><a href="#">About us</a><i class="fa fa-angle-right"></i></li>
<li><a href="#">Portfolio</a><i class="fa fa-angle-right"></i></li>
<li><a href="#">Latest jobs</a><i class="fa fa-angle-right"></i></li>
<li><a href="#">Community</a><i class="fa fa-angle-right"></i></li>
<li><a href="#">Contact us</a><i class="fa fa-angle-right"></i></li>
</ul>
</div><!--/col-md-3-->
<!-- End Link List -->
<!-- Address -->
<div class="col-md-3 map-img md-margin-bottom-40">
<div class="headline"><h2>Contact Us</h2></div>
<address class="md-margin-bottom-40">
25, Lorem Lis Street, Orange <br />
California, US <br />
Phone: 800 123 3456 <br />
Fax: 800 123 3456 <br />
Email: <a href="mailto:info@anybiz.com" class="">info@anybiz.com</a>
</address>
</div><!--/col-md-3-->
<!-- End Address -->
</div>
</div>
<div class="copyright">
<div class="container">
<div class="row">
<div class="col-md-6">
<p>
2015 © All Rights Reserved.
<a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a>
</p>
</div>
<!-- Social Links -->
<div class="col-md-6">
<ul class="footer-socials list-inline">
<li>
<a href="#" class="tooltips" data-toggle="tooltip" data-placement="top" title="" data-original-title="Facebook">
<i class="fa fa-facebook"></i>
</a>
</li>
<li>
<a href="#" class="tooltips" data-toggle="tooltip" data-placement="top" title="" data-original-title="Skype">
<i class="fa fa-skype"></i>
</a>
</li>
<li>
<a href="#" class="tooltips" data-toggle="tooltip" data-placement="top" title="" data-original-title="Google Plus">
<i class="fa fa-google-plus"></i>
</a>
</li>
<li>
<a href="#" class="tooltips" data-toggle="tooltip" data-placement="top" title="" data-original-title="Linkedin">
<i class="fa fa-linkedin"></i>
</a>
</li>
<li>
<a href="#" class="tooltips" data-toggle="tooltip" data-placement="top" title="" data-original-title="Pinterest">
<i class="fa fa-pinterest"></i>
</a>
</li>
<li>
<a href="#" class="tooltips" data-toggle="tooltip" data-placement="top" title="" data-original-title="Twitter">
<i class="fa fa-twitter"></i>
</a>
</li>
<li>
<a href="#" class="tooltips" data-toggle="tooltip" data-placement="top" title="" data-original-title="Dribbble">
<i class="fa fa-dribbble"></i>
</a>
</li>
</ul>
</div>
<!-- End Social Links -->
</div>
</div>
</div><!--/copyright-->
{% endblock %}
{% block js_dependencies %}
{% endblock %}
base.html文件
{% load staticfiles %}
<html>
<head>
<link href="{% static 'bootstrap/css/bootstrap.css' %}"
rel="stylesheet" media="screen">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Favicon -->
<link rel="shortcut icon" href="favicon.ico">
<!-- Web Fonts -->
<link rel='stylesheet' type='text/css' href='http//fonts.googleapis.com/css?family=Open+Sans:400,300,600&subset=cyrillic,latin'>
<!-- CSS Global Compulsory -->
<link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'bootstrap/css/_Home/style.css' %}">
<!-- CSS Header and Footer -->
<link rel="stylesheet" href="{% static 'bootstrap/css/_Home/header.css' %}">
<link rel="stylesheet" href="{% static 'bootstrap/css/_Home/footer.css' %}">
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="{% static 'bootstrap/css/_Home/animate.css' %}">
<link rel="stylesheet" href="{% static 'bootstrap/css/_Home/line-icons.css' %}">
<link rel="stylesheet" href="{% static 'bootstrap/fonts/font-awesome/cssfont-awesome.min.css' %}">
<link rel="stylesheet" href="{% static 'bootstrap/css/_Home/cubeportfolio.min.css' %}">
<link rel="stylesheet" href="{% static 'bootstrap/css/_Home/custom-cubeportfolio.css' %}">
<!-- CSS Pages Style -->
<link rel="stylesheet" href="{% static 'bootstrap/css/_Home/page-one.css' %}">
<!-- CSS Theme -->
<link rel="stylesheet" href="{% static 'bootstrap/css/_Home/default.css' %}" id="style_color">
<link rel="stylesheet" href="{% static 'bootstrap/css/_Home/dark.css' %}">
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" type='text/css' href="{% static 'bootstrap/css/_Home/animate.css' %}">
<link rel="stylesheet" type='text/css' href="{% static 'bootstrap/css/_Home/line-icons.css' %}">
<link rel="stylesheet" type='text/css' href="{% static 'bootstrap/fonts/font-awesome/css/font-awesome.min.css' %}">
<link rel="stylesheet" type='text/css' href="{% static 'bootstrap/css/_Home/parallax.css' %}">
<link rel="stylesheet" type='text/css' href="{% static 'bootstrap/css/_Home/jquery.fancybox.css' %}">
<link rel="stylesheet" type='text/css' href="{% static 'bootstrap/css/_Home/owl.carousel.css' %}">
<!-- CSS Customization -->
<link rel="stylesheet" type='text/css' href="{% static 'bootstrap/css/_Home/custom.css' %}">
<!-- Web Fonts -->
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<!-- CSS Customization -->
<link rel="stylesheet" href="{% static 'bootstrap/css/_Home/custom.css' %}">
{% block header %} {% endblock %}
</head>
<body>
{% block content %} {% endblock %}
{% block js_dependencies %}
<!-- JS Global Compulsory -->
<script type="text/javascript" src="{% static 'bootstrap/js/jquery.min.js' %}"></script>
<script type="text/javascript" src="{% static 'bootstrap/js/jquery-migrate.min.js' %}"></script>
<script type="text/javascript" src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
<!-- JS Implementing Plugins -->
<script type="text/javascript" src="{% static 'bootstrap/js/Responsive_Features/back-to-top.js' %}"></script>
<script type="text/javascript" src="{% static 'bootstrap/js/smoothScroll.js' %}"></script>
<script type="text/javascript" src="{% static 'bootstrap/js/Responsive_Features/jquery.parallax.js' %}"></script>
<script type="text/javascript" src="{% static 'bootstrap/js/Responsive_Features/waypoints.min.js' %}"></script>
<script type="text/javascript" src="{% static 'bootstrap/js/Responsive_Features/jquery.counterup.min.js' %}"></script>
<script type="text/javascript" src="{% static 'bootstrap/js/Responsive_Features/jquery.cubeportfolio.min.js' %}"></script>
<!-- JS Customization -->
<script type="text/javascript" src="{% static 'bootstrap/js/_Home/custom.js' %}"></script>
<!-- JS Page Level -->
<script type="text/javascript" src="{% static 'bootstrap/js/Responsive_Features/app.css' %}"></script>
<script type="text/javascript" src="{% static 'bootstrap/js/Responsive_Features/cube-portfolio-3.js' %}"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
App.init();
App.initCounter();
App.initParallaxBg();
});
</script>
{% endblock %}
</body>
</html>
答案 0 :(得分：0)
你的代码中有一些错误。请参阅此示例以了解折叠导航栏
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"> </ul>
</div>
</div>
</nav>
答案 1 :(得分：0)
Bootstrap Navbar是否正常显示但未点击（汉堡菜单），这是你的意思吗？