Bootstrap4ではheaderを固定するnavber-fixed-topが使えない

3418 ワード
Bootstrap3 bootstrap4 header Rails6 header テキストリンク

学習メモ用です。

解決したい問題

Bootstrap4においてheaderを固定したいが、navber-fixed-topでは適応されなかったので、いかにheaderを固定するか？

開発環境

Rails　6.0.3
bootstrap　4.5.3
OS macOS Catalina

bootstrap4からnavber-fixed-topじゃなく、fixed-topだけでいけるとのこと

見てみるとheaderの下部が詰まっている。

bootstrap公式では

固定トップ
端から端まで、ビューポートの上部に要素を配置します。プロジェクト内の固定位置の影響を必ず理解してください。CSSを追加する必要があるかもしれません。

とのこと。

bootstrap3を使っているrailsチュートリアルでは下記になっている。

body {
padding-top: 60px;
}
ページ上部に60ピクセルの余白を追加します。headerタグにnavbar-fixed-topクラスが与えられているので、これに従ってBootstrapはナビゲーションバーをページ上部に固定し、ナビゲーションバーの下に余白を置いて主要部分から分離します

しかし、うまく適応されない。。。

app/views/layouts/application.html.erb

     <!DOCTYPE html>
<html>
  <head>
    <title><%=full_title(yield(:title))%></title>

    <%= render 'layouts/head' %>

    <%= render 'layouts/shim' %>
  </head>

  <body>

    <%= render 'layouts/header' %>

    <div class="container-fluid">

      <%= render 'layouts/flash' %>

      <%= yield %>

    </div>

  </body>
</html>

このビューも"<%= render 'layouts/flash' %>"がある以外はほとんどrailsチュートリアルと同じ。

やはり、bootstrap4で仕様が変わったと思われ。

app/views/layouts/_flash.html.erb

<div class="text-center lead", style="padding-top: 100px">
  <% flash.each do |key, value| %>
  <p class="alert alert-<%= key %>">
    <%= value %>
・・・

flashのpartialに'padding-top: 100px'を追加してみる。

いけた！

以前はflash自体も重なって表示されなかったけど、今回はこの通り！

まとめ

Bootstrapを使っていると、要素の関係性がよく分からなくなるからひとつずつ潰していきたいもんです。

追記

fixed-topの問題点

  • スクロールしたときにheaderが上部に表示されなくなる
  • 下記画像のようにheaderが被ってしまう

sticky-topであれば解決！

リンクを表示するとその分だけ画面が下方に！
スクロールしても常にheaderは上部に！