質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

質問する

ただいまの
回答率

88.36%

bootstrapレスポンシブでブレイクポイントを過ぎても画面サイズが縮小しない。

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 803
hokosugi

hokosugi

score 55

アプリの全ての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>&copy; distributeImage 2018</p>
      </footer>

    </div> <!-- /container -->

  </body>
</html>

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1 件

link

check解決した方法

0

自己解決ではありませんが、数日後に正常に機能し始めました。
特に何かをいじった訳ではないので何が作用したかは不明です。
かなりの気持ち悪さがありますが、それまでは再起動が上手くいって
なかったのかもしれないと無理矢理こじ付けて了とします。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう！

  • ただいまの回答率 88.36%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
質問する

関連した質問

同じタグがついた質問を見る

SNSアカウントでログイン

teratailアカウントでログイン

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る