django：引导菜单不会在移动设备上折叠

Question

为了使我的项目看起来不错，我必须使用引导程序。 我的base.html中包含来自引导程序示例的默认固定导航栏，并在移动设备上进行尝试，在点击时菜单不会打开，在桌面浏览器缩小时也不会打开。 这是我正在使用的引导代码：

<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </b><a class="navbar-brand" href={% url 'home' %}>SeIDA Project</a></b>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href={% url 'home' %}>Home</a></li>
        <li><a href={% url 'fileuploads' %}>Upload Files</a></li>
        <li><a href={% url 'fileprofile' %}>Your Files</a></li>
        <!-- <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> -->
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li class="dropdown-header">Nav header</li>
            <li><a href="#">Separated link</a></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="../navbar/">Default</a></li>
        <li><a href="../navbar-static-top/">Static top</a></li>
        <li class="active"><a href="./">Fixed top <span class="sr-only">(current)</span></a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>


<br><div class="container"></br>

  <!-- Main component for a primary marketing message or call to action -->
  <div class="jumbotron">
    <p>{% block content %}</p>
    <h3>Welcome to Secure Information Dispersal Information (SeIDA) project </h3>
    <h5><p> SeIDA project encodses your file into n unrecognizable segments such that presence of m segments would suffice to recover the file.</p></h5>
    <h5><p> Using this algorithm provides your data with a high level of confidentiaty and availabality.</p></h5>
    <p>

      <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs &raquo;</a>
    </p>
  </div>

</div> <!-- /container -->
{% endblock%}

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="../../dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>

注意：我也包含了引导CDN。

Answer 1

HTML代码存在一些问题：

</b><a class="navbar-brand" href={% url 'home' %}>SeIDA Project</a></b>

一定是：

<b><a class="navbar-brand" href={% url 'home' %}>SeIDA Project</a></b>

您评论了这一行：

<!-- <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> -->

但是li的结束标记仍在这里存在：

</ul> </li> </ul>

并且由于您希望下拉列表起作用，因此需要通过删除<!--和-->周围的标记来取消注释li标记。

这行的最后一个问题是：

<br><div class="container"></br>

br标签不能这样写，应该是：

<br /> <div class="container">或<div class="container"> <br />取决于您想要什么。

这是您的代码的有效示例，但未尝试使用django，仅尝试了js，css和html组合。 https://jsfiddle.net/azoughbi/rbyqxc86/