アプリの全てのview
でレスポンシブが正しく実行されません。画面サイズが縮小するとともに横スクロールが現れ元画面のサイズを保持しようとしているようです。但し、bootstrap
で作成したナビバーのリンクはハンバーガーアイコンに変化します。具体的には以このリンク-myAppを見てください。
スマホサイズになるとtable
を書き換える仕様です。
レスポンシブを何かが邪魔しているのですがよく分かりません。
参考になるサイトも少なく、どこを見れば良いのか、どこをいじれば良いのかヒントになるご助言頂けると嬉しいです。
gemfile
gem 'pry-rails' gem 'compass-rails','~> 2.0' gem 'sprockets', '2.11.0' gem 'hirb' gem 'hirb-unicode' gem 'roo' gem 'twitter-bootstrap-rails' gem 'therubyracer' gem 'less-rails', '~> 2.8.0' gem 'rubyzip' gem 'aws-sdk' gem 'carrierwave', github: 'carrierwaveuploader/carrierwave' gem 'zipline' gem 'jquery-ui-rails' gem 'devise' gem 'devise-i18n' gem 'devise-bootstrap-views' gem 'gon'
stylesheets/application.scss
/* * This is a manifest file that'll be compiled into application.css, which will include all the files * listed below. * * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets, * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path. * * You're free to add application-wide styles to this file and they'll appear at the bottom of the * compiled file so the styles you add here take precedence over styles defined in any styles * defined in the other CSS/SCSS files in this directory. It is generally better to create a new * file per style scope. * *= require_tree . *= require_self *= require jquery-ui @import "bootstrap"; */
stylesheets/bootstrap_and_overrides.css.less
@import "twitter/bootstrap/bootstrap"; // Set correct font paths @glyphiconsEotPath: font-url("glyphicons-halflings-regular.eot"); @glyphiconsEotPath_iefix: font-url("glyphicons-halflings-regular.eot?#iefix"); @glyphiconsWoffPath: font-url("glyphicons-halflings-regular.woff"); @glyphiconsTtfPath: font-url("glyphicons-halflings-regular.ttf"); @glyphiconsSvgPath: font-url("glyphicons-halflings-regular.svg#glyphicons_halflingsregular"); // Set the Font Awesome (Font Awesome is default. You can disable by commenting below lines) @fontAwesomeEotPath: font-url("fontawesome-webfont.eot"); @fontAwesomeEotPath_iefix: font-url("fontawesome-webfont.eot?#iefix"); @fontAwesomeWoffPath: font-url("fontawesome-webfont.woff"); @fontAwesomeTtfPath: font-url("fontawesome-webfont.ttf"); @fontAwesomeSvgPath: font-url("fontawesome-webfont.svg#fontawesomeregular"); // Font Awesome @import "fontawesome/font-awesome"; // Glyphicons @import "twitter/bootstrap/glyphicons.less"; // Your custom LESS stylesheets goes here // // Since bootstrap was imported above you have access to its mixins which // you may use and inherit here // // If you'd like to override bootstrap's own variables, you can do so here as well // See http://twitter.github.com/bootstrap/customize.html#variables for their names and documentation // // Example: @link-color: #ff0000; // 20181114comment in
view/layout/application.html.erb
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title><%= content_for?(:title) ? yield(:title) : "DistributeImage" %></title> <%= csrf_meta_tags %> <%= stylesheet_link_tag "application", :media => "all" %> <!-- For third-generation iPad with high-resolution Retina display: --> <!-- Size should be 144 x 144 pixels --> <%= favicon_link_tag 'apple-touch-icon-144x144-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '144x144' %> <!-- For iPhone with high-resolution Retina display: --> <!-- Size should be 114 x 114 pixels --> <%= favicon_link_tag 'apple-touch-icon-114x114-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '114x114' %> <!-- For first- and second-generation iPad: --> <!-- Size should be 72 x 72 pixels --> <%= favicon_link_tag 'apple-touch-icon-72x72-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '72x72' %> <!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: --> <!-- Size should be 57 x 57 pixels --> <%= favicon_link_tag 'apple-touch-icon-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png' %> <!-- For all other devices --> <!-- Size should be 32 x 32 pixels --> <%= favicon_link_tag 'favicon.ico', :rel => 'shortcut icon' %> <%= favicon_link_tag %> <!-- Le HTML5 shim, for IE6-8 support of HTML elements --> <!--[if lt IE 9]> <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js" type="text/javascript"></script> <![endif]--> <%= Gon::Base.render_data %> <%= javascript_include_tag "application" %> </head> <body> <% if user_signed_in? %> <div class="navbar navbar-default navbar-static-top"> <div class="container"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">DistributeImage</a> <div class="navbar-collapse collapse navbar-responsive-collapse"> <ul class="nav navbar-nav"> <li><%= link_to "一括ダウンロード", downloads_user_indices_path(@user), download: "" %></li> <li><%= link_to 'ログアウト', destroy_user_session_path, :method=>'delete' %></li> <li><%= link_to "退会", '/users', :method=>'delete', data: {confirm: "すべての映像がなくなります。本当に削除しますか?"} %></li> </ul> </div> </div> </div> <% else %> <div class="navbar navbar-default navbar-static-top"> <div class="container"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">DistributeImage</a> <div class="navbar-collapse collapse navbar-responsive-collapse"> <ul class="nav navbar-nav"> <li><%= link_to 'ログイン', new_user_session_path %></li> <li><%= link_to 'ユーザ登録', new_user_registration_path %></li> <li><%= link_to 'パスワード再発行', new_user_password_path %></li> </ul> </div> </div> </div> <% end %> <footer> <p>© distributeImage 2018</p> </footer> </div> <!-- /container --> </body> </html>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。