【问题标题】:bootstrap navbar mobile toggle not working引导导航栏移动切换不起作用
【发布时间】:2015-05-09 00:55:07
【问题描述】:

我加载了引导 css 和 js 文件并添加了以下 html 代码。 两者都成功加载 - 头部标签中的 css 和页脚下方的 js。其他功能也正常。

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container container-header">

  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="{{ url_for('public.home') }}">

      NekTime

    </a>
  </div>
  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav">
      <li><a href="{{ url_for('public.home') }}">Home</a></li>
      <li><a href="{{ url_for('public.about') }}">About</a></li>
    </ul>
    {% if current_user and current_user.is_authenticated() %}
    <ul class="nav navbar-nav navbar-right">
        <li>
            <p class="navbar-text"><a class="navbar-link" href="{{ url_for('user.members') }}">Logged in as {{ current_user.username }}</a></p>
        </li>
        <li><a class="navbar-link" href="{{ url_for('public.logout') }}"><i class="fa fa-sign-out"></i></a></li>

    </ul>
    {% elif form %}
    <ul class="nav navbar-nav navbar-right">
      <li><a href="{{ url_for('public.register') }}">Create account</a></li>
    </ul>
    <form id="loginForm" method="POST" class="navbar-form form-inline navbar-right" action="/" role="login">
      {{ form.hidden_tag() }}
      <div class="form-group">
        {{ form.username(placeholder="Username", class_="form-control") }}
        {{ form.password(placeholder="Password", class_="form-control") }}
      </div>
      <button type="submit" class="btn btn-default">Log in</button>
    </form>
    {% endif %}
  </div><!-- /.navbar-collapse -->
  </div><!-- /.container -->
</nav>

当我缩小浏览器时,切换按钮会替换其他菜单,但我无法展开该切换按钮。 我设法获得了正确的数据目标.. 我不知道下一步该做什么

【问题讨论】:

    标签: javascript html css twitter-bootstrap


    【解决方案1】:

    我在按钮标签中添加了collapsed 类,它可以工作。看下面的代码。

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

    【讨论】:

      【解决方案2】:

      第二天它工作了..当我更改了加载 jquery 的代码时。猜测之前带jquery的代码没有正常工作。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2015-10-27
        • 1970-01-01
        • 2017-05-30
        • 2015-09-07
        • 1970-01-01
        • 2013-10-01
        相关资源
        最近更新 更多