bootstrapでヘッダーとフッターの導入をしたのですが、
コンテンツ部分が隠れてしまったり(header)、重なってしまったり(footer)してします。
いろいろ探してみたりはしたのですが、うまくいかなかったのですがいい方法はありますでしょうか?
###該当のソースコード
application.html
<body> <%= render 'layouts/header' %> <%= yield %> <%= render 'layouts/footer' %> </body>
application.css.scss
body { background-color: #F5F5F5; background-size:cover; }
footerとheaderを固定するため以下のコードを使用しました。
_header
<nav class="navbar navbar-fixed-top" role="navigation">
_footer
<nav class="navbar navbar-fixed-bottom" role="navigation">
ブラウザソース
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <nav class="navbar navbar-fixed-top" role="navigation"> <div class="bs-component"> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="/">sample app</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2"> <ul class="nav navbar-nav"> <li><a href="/users/sign_up">Sign up</a></li> <li><a href="/users/sign_in">Log in</a></li> </ul> </div> </nav> </div><!-- /example --> </div> </div> </div> </div> </nav> <div class="alert alert-info">Signed out successfully.</div> <div class="col-md-8 col-md-offset-2"> <div class="jumbotron jumbotron-fluid"> <div class="container"> <div Align="center"> <h1 class="display-3">sample app</h1> <p>Welcome to sample app</p> <a class="btn btn-primary" href="/users/sign_up">Sign up</a> <a class="btn btn-primary" href="/users/sign_in">Log in</a> </div> </div> </div> </div> <nav class="navbar navbar-fixed-bottom" role="navigation"> <div class="container text-center"> <hr /> <div class="row"> <div class="col-lg-12"> <div class="col-md-3"> <ul class="nav nav-pills nav-stacked"> </ul> </div> <div class="col-md-3"> <ul class="nav nav-pills nav-stacked"> <li><a href="/about">About</a></li> </ul> </div> <div class="col-md-3"> <ul class="nav nav-pills nav-stacked"> <li><a href="/help">Help</a></li> </ul> </div> <div class="col-md-3"> <ul class="nav nav-pills nav-stacked"> </ul> </div> </div> </div> <hr> <div class="row"> <div class="col-lg-12"> <ul class="nav nav-pills nav-justified"> <li></li> </ul> </div> </div> </div> </div> </div> </body> </html>
###環境
Ruby on Rails
回答1件
あなたの回答
tips
プレビュー