rails 4, bootstrap 3で navbarがmobileでresponsiveにならないのを解決する。

railsでbootstrapを使う

1. getbootstrap.com からbootstrap.min.cssとbootstrap.min.jsをダウンロードして、それぞれvendor/assets/stylesheetsと vendor/assets/javascriptsに入れる

2. app/assets/javascripts/application.jsに以下を追加

//= require bootstrap.min

1. app/assets/stylesheets/application.cssに以下を追加

*= require bootstrap.min

これで、基本的にbootstrapが使えるようになったはず。

navbarを入れる

app/views/layouts/application.html.hamlのbodyに(または、templateに分けた部分に)以下を書く

%nav.navbar.navbar-default
  .container-fluid
    / Brand and toggle get grouped for better mobile display
    .navbar-header
      %button.navbar-toggle.collapsed{"aria-expanded" => "false", "data-target" => ".navbar-collapse", "data-toggle" => "collapse", :type => "button"}
        %span.sr-only Toggle navigation
        %span.icon-bar
        %span.icon-bar
        %span.icon-bar
      = link_to "App Name", '#', class: "navbar-brand"
    / Collect the nav links, forms, and other content for toggling
    .collapse.navbar-collapse
      %ul.nav.navbar-nav
        %li= link_to 'Link', '#'
        %li.dropdown
          %a.dropdown-toggle{"aria-expanded" => "false", "aria-haspopup" => "true", "data-toggle" => "dropdown", :href => "#", :role => "button"}
            Dropdown
            %span.caret
          %ul.dropdown-menu
            %li= link_to 'About', '#'              
            %li= link_to 'Another action', '#'
            %li= link_to 'Something else here', '#'

これで、PCのブラウザではresponsiveが動く。幅を小さくすると、dropdownボタンになる。

しかし、mobileでは、responsiveにならない。

mobile版のresponsiveを直す。

app/views/layouts/application.html.hamlに以下を%headの中に追加

%meta{name: "viewport", content: "width=device-width, initial-scale=1.0" }

これで、思い通りに動くようになった。

参考ページ