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

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

新規登録して質問してみよう
ただいま回答率
85.48%
Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Q&A

解決済

1回答

2054閲覧

Laravelのヘッダーがコンテンツにかぶる

toyop

総合スコア30

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

0グッド

0クリップ

投稿2020/09/25 05:54

編集2020/09/25 06:39

こんにちは。

Laravelでウェブアプリケーションを作っています。下の画像のようにヘッダーがサイトのコンテンツにかぶってしまいます。
画像
これはログイン用に用意されているlogin.blade.phpなのですが、特にコードはいじっておらず、また、ヘッダーのコードが記述されているapp.blade.phpもコードは変更していないです。一応、コードも添付します。

他のページもこうなってしまっているのですが、それはbootstrapが原因なのかなとか思っていたのですが、このページについてはわからなかったです。


login.blade.php

php

1@extends('layouts.app') 2 3@section('content') 4<div class="container"> 5 <div class="row justify-content-center"> 6 <div class="col-md-8"> 7 <div class="card"> 8 <div class="card-header">{{ __('Login') }}</div> 9 10 <div class="card-body"> 11 <form method="POST" action="{{ route('login') }}"> 12 @csrf 13 14 <div class="form-group row"> 15 <label for="email" class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label> 16 17 <div class="col-md-6"> 18 <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus> 19 20 @error('email') 21 <span class="invalid-feedback" role="alert"> 22 <strong>{{ $message }}</strong> 23 </span> 24 @enderror 25 </div> 26 </div> 27 28 <div class="form-group row"> 29 <label for="password" class="col-md-4 col-form-label text-md-right">{{ __('Password') }}</label> 30 31 <div class="col-md-6"> 32 <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="current-password"> 33 34 @error('password') 35 <span class="invalid-feedback" role="alert"> 36 <strong>{{ $message }}</strong> 37 </span> 38 @enderror 39 </div> 40 </div> 41 42 <div class="form-group row"> 43 <div class="col-md-6 offset-md-4"> 44 <div class="form-check"> 45 <input class="form-check-input" type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}> 46 47 <label class="form-check-label" for="remember"> 48 {{ __('Remember Me') }} 49 </label> 50 </div> 51 </div> 52 </div> 53 54 <div class="form-group row mb-0"> 55 <div class="col-md-8 offset-md-4"> 56 <button type="submit" class="btn btn-primary"> 57 {{ __('Login') }} 58 </button> 59 60 @if (Route::has('password.request')) 61 <a class="btn btn-link" href="{{ route('password.request') }}"> 62 {{ __('Forgot Your Password?') }} 63 </a> 64 @endif 65 </div> 66 </div> 67 </form> 68 </div> 69 </div> 70 </div> 71 </div> 72</div> 73@endsection 74

app.blade.php

php

1<!doctype html> 2<html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> 3 4<head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 8 <!-- CSRF Token --> 9 <meta name="csrf-token" content="{{ csrf_token() }}"> 10 11 <title>{{ config('app.name', 'Laravel') }}</title> 12 13 <!-- Scripts --> 14 <script src="{{ asset('js/app.js') }}" defer></script> 15 16 <!-- Fonts --> 17 <link rel="dns-prefetch" href="//fonts.gstatic.com"> 18 <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet"> 19 20 <!-- Styles --> 21 <link href="{{ asset('css/app.css') }}" rel="stylesheet"> 22</head> 23 24<body> 25 <div id="app"> 26 <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm fixed-top"> 27 <div class="container"> 28 <a class="navbar-brand" href="{{ url('/') }}"> 29 {{ config('app.name', 'Laravel') }} 30 </a> 31 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}"> 32 <span class="navbar-toggler-icon"></span> 33 </button> 34 35 <div class="collapse navbar-collapse" id="navbarSupportedContent"> 36 <!-- Left Side Of Navbar --> 37 <ul class="navbar-nav mr-auto"> 38 39 </ul> 40 41 <!-- Right Side Of Navbar --> 42 <ul class="navbar-nav ml-auto"> 43 <!-- Authentication Links --> 44 @guest 45 <li class="nav-item"> 46 <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a> 47 </li> 48 @if (Route::has('register')) 49 <li class="nav-item"> 50 <a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a> 51 </li> 52 @endif 53 @else 54 <li class="nav-item dropdown"> 55 <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre> 56 {{ Auth::user()->name }} <span class="caret"></span> 57 </a> 58 59 <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown"> 60 <a class="dropdown-item" href="{{ route('logout') }}" onclick="event.preventDefault(); 61 document.getElementById('logout-form').submit();"> 62 {{ __('Logout') }} 63 </a> 64 65 <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;"> 66 @csrf 67 </form> 68 </div> 69 </li> 70 @endguest 71 </ul> 72 </div> 73 </div> 74 </nav> 75 76 <main class="py-4"> 77 @yield('content') 78 </main> 79 </div> 80</body> 81 82</html>

もし原因のわかる方いらっしゃいましたら、解決法をご教授よろしくお願いいたします。
Laravelのバージョンは7.15.0
bootstrapは4.4.1です。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2020/09/25 06:23

Bootstrapのバージョンは幾つでしょうか。 あと念のためLaravelのバージョンもご提示ください。
toyop

2020/09/25 06:34

m.ts10806さん Laravelのバージョンは7.15.0 bootstrapは4.4.1です。
m.ts10806

2020/09/25 06:35

質問本文に追記してください。
kai0310

2020/09/25 07:36

npm install && npm run dev は行いましたか?
guest

回答1

0

ベストアンサー

Laravelは関係なくbootstrapの話。
navbarのfixed-top
これを使うときは70px分くらい上を空けないとそうなる。

css

1body { 2 padding-top: 70px; 3}

bootstrapのドキュメントに書いてあるはずだけどver4では見つからないのでver3
https://getbootstrap.com/docs/3.4/components/#navbar-fixed-top
v4では何pxかは書いてないので自分で好きなように。
https://getbootstrap.com/docs/4.5/components/navbar/#placement

投稿2020/09/25 08:11

kawax

総合スコア10377

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問