我陷入了一个非常简单的问题 -
我正在使用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
现在,当我将浏览器调整为移动设备时,单击菜单按钮时没有任何反应。它应该扩大。
答案 0 :(得分:0)
要使Bootstraps mobile collapse
正常工作,您需要包含:
其次是
2)模板中的Bootstrap JS(CDN或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
a(href='http://bit.ly/181yG5r') Bootstrap 3 version of the sample templates
| 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')