Bootstrap 即使我设置了数据目标，移动视图菜单也不会展开

Question

我被困在一个很简单的问题上 -

我按照 bootstrap 教程使用 Jade 构建导航栏。这是我的导航栏 jade 代码：

nav#mainNav.navbar.navbar-default.navbar-fixed-top
    .container-fluid
      .navbar-header
        button.navbar-toggle.collapsed(type='button', data-toggle='collapse', data-target='#navbar-collapse-1')
          span.sr-only Toggle navigation
          span.icon-bar
          span.icon-bar
          span.icon-bar
        a.navbar-brand.page-scroll(href='#page-top') Start Bootstrap
      #navbar-collapse-1.collapse.navbar-collapse
        ul.nav.navbar-nav.navbar-right
          li
            a.page-scroll(href='#about') About
          li
            a.page-scroll(href='#services') Services
          li
            a.page-scroll(href='#portfolio') Portfolio
          li
            a.page-scroll(href='#contact') Contact

现在，当我将浏览器调整为移动设备时，单击菜单按钮时没有任何反应。它应该展开。

Answer 1

要让 Bootstrap 的手机 collapse 正常工作，您需要包括：

1) Jquery (CDN or repo)

其次是

2) Bootstrap JS (CDN or repo) 在你的模板中，一般是页脚：

这是来自 github

的示例

doctype html
html(lang='en')
head
    meta(charset='utf-8')
    meta(name='viewport', content='width=device-width, initial-scale=1.0')
    meta(name='description', content='')
    meta(name='author', content='')
    meta(name='copyright', content='Copyright (c) 2013 ALT-F1, We believe in the projects we work on™')
    link(rel='shortcut icon', href='/bootstrap-3.3.1/assets/ico/favicon.png')
    title Starter Template for Bootstrap
    //Bootstrap core CSS
    link(href='/bootstrap-3.3.1/dist/css/bootstrap.css', rel='stylesheet')
    //Custom styles for this template
    link(href='/bootstrap-3.3.1/docs/examples/starter-template/starter-template.css', rel='stylesheet')
    //HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries
    //if lt IE 9
    script(src='https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js')
    script(src='https://oss.maxcdn.com/respond/1.4.2/respond.min.js')
body
    a(href='https://github.com/ALT-F1/bootstrap3-jade-node-express-grunt')
        img(style='position: absolute; top: 20; right: 0; border: 0;', src='https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png', alt='Fork me on GitHub')

    .navbar.navbar-inverse.navbar-fixed-top
        .container
            .navbar-header
                button.navbar-toggle(type='button', data-toggle='collapse', data-target='.navbar-collapse')
                    span.icon-bar
                    span.icon-bar
                    span.icon-bar
                a.navbar-brand(href='#') Bootstrap 3 / Jade
            .collapse.navbar-collapse
                ul.nav.navbar-nav
                    li.active
                        a(href='#') Home
                    li
                        a(href='/about') About ALT-F1
                    li
                        a(href='/contact') Contact ALT-F1
//
          /.nav-collapse
    .container
        .starter-template
            h1 Bootstrap 3 rendered by Jade, Node, Express and Grunt
            p.lead
                | test each of the&nbsp;
                a(href='http://bit.ly/181yG5r') Bootstrap 3 version of the sample templates&nbsp;
                | by clicking on the links below
        .bs-example
            block body
//
       /.container
      //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.1/jquery.min.js')
      script(src='/bootstrap-3.3.1/dist/js/bootstrap.min.js')

Bootstrap 即使我设置了数据目标，移动视图菜单也不会展开

Bootstrap mobile view menu does not expand even though I have set data-target

html

twitter-bootstrap

twitter-bootstrap-3

pug