レイアウトが崩れる
解決したいこと
WEBアプリケーションを作っています。
使用したことがなかったので試しにとbootstrapを使用しトップバーを実装しました。
しかしページを表示したままスリープ状態などで放置して次の日見てみるとレイアウトが大きく崩れてしまいます。
そしてリロードすると直ります。
そういった現象を防ぐことはできるのか教えてほしいです。
発生している問題・エラー
崩れた表示です。
リロードするとこのように直ります。
該当するソースコード
<header class="p-3 bg-dark text-white">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
<svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg>
</a>
<div class="nav__left">
<%= link_to "GAME CONNECT", root_path, class: :logo %>
</div>
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<li><a href="/users" class="nav-link px-2 text-white">ユーザー一覧</a></li>
<% if user_signed_in? %>
<%# <li><a href="#" class="nav-link px-2 text-white">フォローユーザー</a></li> %>
<%# <li><a href="#" class="nav-link px-2 text-white">チェックした募集</a></li> %>
<li><a href="/rooms" class="nav-link px-2 text-white">チャットルーム</a></li>
<% end %>
</ul>
<div class="text-end">
<% if user_signed_in? %>
<div class="nav__right">
<%= link_to destroy_user_session_path, method: :DELETE do %>
<button type="button" class="btn btn-outline-light me-2">ログアウト</button>
<% end %>
<%= link_to user_path(current_user.id) do %>
<button type="button" class="btn btn-warning"><%= current_user.nickname %></button>
<% end %>
</div>
<% else %>
<%= link_to new_user_session_path do %>
<button type="button" class="btn btn-outline-light me-2">ログイン</button>
<% end %>
<%= link_to new_user_registration_path do%>
<button type="button" class="btn btn-warning">新規登録</button>
<% end %>
<% end %>
</div>
</div>
</div>
</header>
0 likes