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

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

ただいまの
回答率

87.48%

【Rails6】Bootstrap4を使用していますが、ログアウトした後にだけレイアウトが崩れてしまう。

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 634

score 6

前提・実現したいこと

いつも大変お世話になっております。

ruby on rails6でブログを投稿できるポートフォリオサイトを制作中です。
Bootstrap4を使用しているのですが、ユーザーがログアウトするとレイアウトが崩れてしまいます。
その表示の差をなくしたいと思いこちらに質問させて頂きました。

Bootstrap4はbootstrapのgemを追加する方法で導入しました。
ログアウトすると表示が崩れるだけで機能は正常に動きます。
Railsアプリで Bootstrap 4 を利用するの記事を参考にしました。

ブログの記事を入力する部分にActionTextを使用しています。

発生している問題

ユーザーがログアウトするとグリッドシステムを使用している部分の表示が崩れてしまう。

該当のソースコード

view/posts/index.html/erb

    <%= render partial: 'layouts/flash' %>
<div class="bg-sample">
<h3 class="text-lg-center mt-5">地球と人のつながりをもっと身近なものに。</h3>
    <p class="text-lg-center text-muted">みんなの投稿で普段の生活をもっと未来につなげよう</p>
    </div>
    <br>
    <br>
    <hr>
    <% breadcrumb :root %>
<div class="container">
  <div class="row">
    <div class="col-lg-8">
    <% @posts.each do |post| %>
        <div class="card mb-4">
          <%= image_tag post.image.variant(resize:'300x400').processed, class: "card-img-top "%>
          <div class="card-body">
            <h2 class="card-title"><%= post.title %></h2>
            <p class="card-text"><%= strip_tags(post.content.to_s).gsub(/[\n]/,"").strip.truncate(20)%></p>
            <div class="m-2">
            <%= render partial: 'posts/posts',  locals: { post: post }%>
            </div>
          <div class="col">
          <a href="/users/<%= post.user.id %>", class="d-flex justify-content-start align-items-center", style="text-decoration: none">
            <% if post.user.image.attached? %>
            <%= image_tag post.user.image, class:"avatar m-1"%>
            <% else %>
            <%= image_tag ("defo.jpg"), class:"avatar m-1"%>
            <% end %>
        <div class="flex-column">
          <p class="h4 text-bold text-muted "><%= post.user.nickname %></p>
          <span class="text-muted small">投稿日時:<%= post.created_at.to_s(:datetime_jp) %></span>
        </div>
          </a>
        </div>
      </div>
        <div class="card-footer text-muted">
          <div class="field">
            <%= link_to '詳細ページ', post, class: "btn btn-outline-secondary form-control " %>
          </div>
        </div>
      </div>
      <% end %>
      </div>
  <div class="col-lg-4">
    <div class="card">
      <div class="card-body">
      <h5 class="card-title">タグ一覧</h5>
      <h6 class="card-subtitle mb-2 text-muted">クリックで関連した記事が見れます</h6>
      <% @tags.each do |tag| %>
    <span class="badge badge-pill badge-info m-1 p-2">
    <%= link_to tag.name, posts_path(tag_name: tag.name), class: "text-white"%>
      </span>
      <% end %>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
      </div>
    </div>
  </div>
  </div>
</div>
<%= paginate @posts %>
<div class="container" style="margin-bottom:100px;"></div>


view/posts/show.html/erb

<hr>
  <% breadcrumb :post %>
<div class="container">
  <div class="row">
    <div class="col-md-7 offset-3">
      <%= image_tag @post.image.variant(resize:'700x500').processed %>
      <br>
      <br>
      <h2 class="font-weight-bold mb-1">
      <%= @post.title %>
      </h2>
      <%= render partial: 'posts/posts',  locals: { post: @post }, class:"m-2"%>
    <a href="/users/<%= @post.user.id %>", class="d-flex", style="text-decoration: none">
      <% if @post.user.image.attached? %>
        <%= image_tag @post.user.image, class:"avatar m-1"%>
      <% else %>
        <%= image_tag ("defo.jpg"), class:"avatar m-1"%>
      <% end %>
      <div class="flex-column ">
        <p class="h4 text-bold text-muted "><%= @post.user.nickname %></p>
        <span class="text-muted small">投稿日時:<%= @post.created_at.to_s(:datetime_jp) %></span>
      </div>
    </a>
      <div class="card">
      <%= @post.content %>
      </div>
    </div>
  </div>
</div>
<div class="container col-md-7 offset-3">
  <hr>
  <div class="text-center text-muted mb-4">
    <h4>タグ</h4> <%= @comments_count %>
  </div>
  <div class="">
    <%= render 'posts/tag_list', tag_list: @post.tag_list %>
  </div>
    <hr>
  <div class=" text-center text-muted mb-4">
    <h4>コメント</h4> <%= @comments_count %>
  </div>
  <div class=" mx-auto">
    <% if @comments %>
      <% @comments.each do |comment| %>
        <% if user_signed_in? %>
          <div class="row">
          <p>
            <div class="col-10">
            <strong><%= link_to comment.user.nickname, "/users/#{comment.user_id}" %></strong>
        <%= comment.text %>
          <% if current_user.id == comment.user_id %>
            </div>
          <div class="col-2">
            <%= link_to "削除", post_comment_path(@post, comment), method: :delete , class: "btn btn-outline-secondary btn-sm "%>
          </div>
        <% end %>
          </p>
        </div>
          <% else %>
          <p>
        <strong> <%= comment.user.nickname %></strong>
        <%= comment.text %>
          </p>
        <% end %>
    <% end %>

    <% if current_user %>
    <div class="container ">
        <hr>
          <%= form_with(model: [@post, @comment], local: true) do |form| %>
            <div class="form-group mt-3">
              <%= form.text_area :text, placeholder: "コメント", rows: "2", class: "form-control" %>
              <div class="text-right">
                <%= form.submit "SEND", class: "btn btn-outline-secondary "%> <% end %>
              </div>
            </div>
          <% else %>
          <strong><p class="text-center">※※※ コメントするにはログインしてください ※※※</p></strong>
          <% end %> 
          <% end %>
      </div>
  </div>
</div>
<div class="container" style="margin-bottom:200px;">


view/users/show.html/erb

<div class="container" style="margin-top:20px;">
<%= render 'userhed' %>
<hr>
<div class="album py-5 bg-light">
<% breadcrumb :user %>
  <div class="container">
    <div class="row">
      <% @posts.each do |post| %>
      <div class="col-md-4">
        <div class="card text-center h-100">
          <td><%= image_tag post.image.variant(resize:'300x200'), class: "card-img-top" %></td>
          <h4 class="card-text"><%= post.title %></h4>
          <div class="card-body ">
            <%= strip_tags(post.content.to_s).gsub(/[\n]/,"").strip.truncate(20)%>
                  <%= render partial: 'posts/posts',  locals: { post: post } %>
              <div class="d-flex justify-content-between align-items-center">
                <div class="btn-group mt-3 mx-auto">
                  <% if user_signed_in? && current_user.id == post.user_id%>
                    <%= link_to '編集', edit_post_path(post.id), method: :get, class: "btn btn-sm btn-outline-primary" %>
                    <%= link_to '削除', post, method: :delete, data: { confirm: 'Are you sure?' } , class: "btn btn-sm btn-outline-primary"%>
                    <% else %>
                    <%= link_to '詳細', post, class: "btn btn-sm btn-outline-primary" %>
                    <%= link_to 'トップページ', posts_path, class: "btn btn-sm btn-outline-primary" %>
                  <% end %>
                </div>
              </div>
            <hr>
            <small class="text-muted mt-4"><%= post.created_at.to_s(:datetime_jp) %></small>
          </div>
        </div>
      </div>
    <% end %>
    </div>
  </div>
</div>
<%= paginate @posts %>
<div class="container" style="margin-bottom:200px;">

試したこと

一度Bootstrap 4のgemをアンインストールしてみてCDNで表示しようとやってみたのですが、アンインストールする前よりもレイアウトが崩れてしまいました。そしてログアウトしようとするとエラーが出るなど他の機能にも支障が出たために元に戻しました。

BootstrapのCDNのみの設定でも同じように表示の崩れは治りませんでした。

どうやら表示が崩れている部分はeach文の部分のようですが、ログインの有無によって表示が変わる原因はわかりません。

できることならば現状のやり方のままで修正を加えてログインしていない状態でもうまく表示したいです。

初心者ゆえ説明や理解が足りない部分もあると思いますが解決法を教えてもらえるとありがたいです。

どうかよろしくお願いします。

補足情報(FW/ツールのバージョンなど)

ruby_version 2.6.5

Rails 6.0.3.4

​Bootstrap 4.1.1

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • kema

    2020/11/05 18:03

    no1knows様、紹介していただいたサイトも参考にしながら自分なりに試行錯誤してみたのですがどうしても表示の修正ができませんでした。
    シンプルにサイトのとおりに記述してみるとその通りの配置になるのですが、each文などが出てくるとどうしても思ったように表示できません。
    またログイン、ログアウトどちらかにビューを合わせるとやはり表示が崩れます。
    質問内容も編集しましたのでどうか力を貸してください。
    今回得たことは必ず今後の糧にしますので、どうかよろしくお願いします。

    キャンセル

  • no1knows

    2020/11/05 19:07

    ちなみにエディターは何を使っていますか?

    キャンセル

  • kema

    2020/11/05 19:25

    Visual Studio Codeを使用しております。

    キャンセル

回答 1

checkベストアンサー

+1

修正箇所が多そうなので、ひとまず直接的な回答ではないですが・・・

まず自動整形機能のプラグインを導入していただくと良いかと思います。
VS Codeは使ったことがないのですが、たぶん下記の記事内にあるAuto Close Tagで良いかと思います。

https://teratail.com/questions/113840

自動整形機能を利用するとタグの利用間違いを自動で見つけて教えてくれるので、まずはビューを1つずつ修正していくことをおすすめします。


ちなみに下記ソースはHerokuのトップページで、右クリック⇒ページのソースを表示するで、ソースを表示し、それをコピペして自動整形したものです。
1分もかからずに</nav>までの間で2つのタグの利用間違いを確認できています。


適切なタグを利用していれば、eachを利用しても期待通りの結果は簡単に実現できるかと思いますので一度お試しください。

シンプルにサイトのとおりに記述してみるとその通りの配置になるのですが、each文などが出てくるとどうしても思ったように表示できません。

<!DOCTYPE html>
<html>
  <head>
    <title>Tiisana</title>
    <meta name="csrf-param" content="authenticity_token" />
    <meta name="csrf-token" content="qe4HqFzhuA8VOYAwUQmPL6upZUmK0RkffWrGaqCrKBGf5+7knzL8d/S1fcUisD5JS7MFa4KIMU675ipXk6KbSg==" />

    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.9.0/css/all.css">

    <link rel="stylesheet" media="all" href="/assets/application-853939b2a6026f47ba12094476cf576e4ad29be7ee10730daae44597d521ace9.css" />
    <script src="/packs/js/application-da7a9daff82f73ecae4b.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

  </head>

  <body>
    <nav class="navbar navbar-light navbar-expand-md ">
      <a class="navbar-brand text-primary" href="/">
        <div class="h1">Tiisana</div>
      </a>
      <div class="collapse navbar-collapse">
        <ul class="navbar-nav ml-auto">
          <div class="navbar-item d-flex justify-content-end align-items-center">
            <form class="search-form" action="/posts/search" accept-charset="UTF-8" method="get">
              <div class="input-group">
                <input class="search-form navop form-control" type="text" name="keyword" id="keyword" />
                <button name="button" type="submit" class="btn btn-light mr-1"><i class="fa fa-search"></i></button>
              </div>
            </form></div>
          <li class="nav-item mr-2 ">
            <a class="nav-alink btn btn-light " href="/posts/new">新規投稿</a>
          </li>
          <li class="nav-item dropdown">
            <div class="btn-group">
              <button class="nav-alink btn btn-light dropdown-toggle" data-toggle="dropdown" href="/" aria-haspopup="true" aria-expanded="false">koneko
              </button>
              <div class="dropdown-menu dropdown-menu-right">
                <a><a class="dropdown-item" type="button" href="/users/21">マイページ</a></a>
                <a><a class="dropdown-item" type="button" href="/users/edit">プロフィール編集</a></a>
                <a><a class="dropdown-item" type="button" rel="nofollow" data-method="delete" href="/users/sign_out">ログアウト</a></a>
              </div>
            </div>
          </li>
        </ul>
        <ul> <!-- このulは必要ないはず -->
          </div>
        </nav>

    </nav> <!-- この/navは必要ないはず -->

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2020/11/05 20:22

    ありがとうございます!
    色々と調べてくださり感謝します。
    早速インストールして使用してみます。

    キャンセル

  • 2020/11/06 10:21 編集

    解決致しました。教えていただいたサイトでエラー箇所を修正していき最終的には表示できました。
    そしてその修正の過程で一番表示崩れの原因になっていたのは非同期で実装したいいね機能の
    部分だと判明しました。
    パーシャルで各ページに渡しているいいね機能の記述の中に余計な閉じタグが紛れ込んでいまし。本当に丁寧にご指導いただきありがとうございました。
    今後ともよろしくお願いします。

    キャンセル

  • 2020/11/06 13:35

    それは良かったです!

    キャンセル

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

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

関連した質問

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