Question

据我所知，所有列表项目都在：

<div id="navbar" class="navbar-collapse collapse">

应该在定义的断点处折叠到单个菜单中。我已经对以下代码进行了几个小时的故障排除，但无法找到它无法正常工作的原因：

<header>
  <link href="{{ STATIC_URL }}css/bootstrap.min.css" type="text/css" rel="stylesheet" />
  <link href="{{ STATIC_URL }}css/cloudserv.css" type="text/css" rel="stylesheet" />
  <link rel="shortcut icon" type="image/png" href="{{STATIC_URL}}/img/favicon.ico"/>
</header>

<div class="navbar navbar-default navbar-static-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/"><img src="{{ STATIC_URL }}img/logo.png"></img></a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
      {% for category in main_menu %}
      {%  if category.item_set.all %}
        <li class="dropdown">
          <a href="{{ category.url_name }}" class="dropdown-toggle" data-toggle="dropdown">{{ category.name }}<b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="/{{ category.url_name }}">{{ category.name }}</a></li>
            <li class="divider"></li>
            {% for item in category.item_set.all %}
            <li><a href="/{{ category.url_name }}/{{ item.url_name }}">{{ item.name }}</a></li>
            {% endfor %}  
          </ul>
        </li>
        {% else %}   
        <li><a href="/{{ category.url_name }}">{{ category.name }}</a></li>
        {% endif %}
      {% endfor %}
      </ul>
    </div>
  </div>
</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="{{ STATIC_URL }}js/jquery-1.11.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="{{ STATIC_URL }}js/bootstrap.min.js"></script>

请注意括号内的所有代码都与Django的模板系统有关。 此外，已包含所有相关的Bootstrap文件，菜单的所有其他方面似乎都正常工作。

Answer 1

.navbar-toggle的{{1}}属性需要定位data-target div。由于它的ID为collapse，您可以使用CSS样式选择器（例如navbar

）来定位它

在

data-target="#navbar"

在

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">

更新：

您还错过了<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">下面的元标记。

head

移动设备需要此功能，否则移动浏览器会缩小，您将无法获得移动断点。

菜单不会在小型设备上崩溃

1 个答案: