Question

I’m testing twitter bootstrap 2 to see responsive feature in it. But I can’t make it work on small devices. Here is my navbar jade template code:

div.navbar.navbar-fixed-top
  div.navbar-inner
    div.container-fluid
      a.brand(href="#") WOWITO
      div.nav-collapse
       ul.nav
        li.active
         a(href='/getpassword', data-transition='fade', data-role='button', data-theme='a') Forgot Password?
      div.btn-group.pull-right
        a.btn.dropdown-toggle(href="#",data-toggle="dropdown") 
         i.icon-user 
         Font Size
         span.caret
        ul.dropdown-menu
         li
          a#fs_med medium 
         li
          a#fs_lrg large
         li
          a#fs_xlrg xlarge

and here is my layout code:

    meta(name='viewport', content="width=device-width, initial-scale=1.0")
    link(rel='stylesheet', href='/bootstrap/css/bootstrap.min.css')
    style( type="text/css")
      body {
      padding-top: 60px;
      padding-bottom: 40px;
      }
      .sidebar-nav {
       padding: 9px 0;
       }
    link(rel='stylesheet', href='/stylesheets/bootstrap-responsive.min.css')
    link(rel='stylesheet', href='/stylesheets/style.css')
    script(type='text/javascript', src='/javascripts/jquery.min.js') 
    script(type='text/javascript', src='/bootstrap/js/bootstrap.min.js')

Is there something missed? How can I fix it?

Thanks,

Answer 1

This should work. It seems as if the responsive stylesheet is not loading. The path is probably not correct. If all the bootstrap stylesheets are in the same folder (as I would imagine), then probably the line should be:

link(rel='stylesheet', href='/bootstrap/css/bootstrap-responsive.min.css')

instead of:

link(rel='stylesheet', href='/stylesheets/bootstrap-responsive.min.css')