Laravel 7页脚在某些网页中不显示
Laravel 7页脚在某些网页中不显示
提问于 2020-03-19 01:17:26
我创建了一个页脚，我想@包含到其他网页。因此，我创建了@section('content')，然后在底部创建了@include('footer')，然后是@endsection。现在，这只适用于我的联系页面，这是显示页脚。但不在我的主页或博客页面上工作。下面我将包括我在Laravel 7上工作的代码，使用刀片，尾风，html/css。我尝试了多种方法，比如移动@include、@extends或@yeild，但都不能解决这个问题。任何帮助或指导都将不胜感激。
例如，当我检查主页时，页脚正在通过，但与导航栏混合在一起。当我检查联系人页面时，它应该放在页面底部的位置。这把我难倒了。
页脚
@extends('layout')
<footer>
<div class="flex justify-center bottom-0 bg-gray-800 h-18 pt-4 pb-4 static w-full">
<a href="https://paolotrulli.com" class="text-white hover:text-blue-800 m-2"><img class="h-10 w-10"
src="/images/global.svg"></a>
<a href="https://twitter.com/p_trulli" class="text-white hover:text-lue-800 m-2"><img class="h-10 w-10"
src="/images/twitter-black.svg"></a>
<a href="https://github.com/PT-83" class="text-white hover:text-blue-800 m-2"><img class="h-10 w-10"
src="/images/github.svg"></a>
<p class="text-white pt-4">Copyright 2020, Paolo Trulli</p>
</div>
</footer>
@yield('footer')布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.0.1/dist/alpine.js" defer></script>
<title>@yield('title')</title>
</head>
<html>
<body>
<div class="absolute inset-x-0 top-0">
<nav x-data="{ open: false }" @keydown.window.escape="open = false" class="bg-gray-800">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center h-24">
<div class="flex items-center">
<div class="flex-shrink-0">
<img class="h-12 w-12" src="/images/startup.svg" alt="icon" />
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline">
<a href="/home"
class="px-4 py-2 rounded-md text-lg font-medium text-white bg-gray-900 focus:outline-none focus:text-white focus:bg-gray-700">Home</a>
<a href="/contact"
class="ml-4 px-3 py-2 rounded-md text-lg font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Contact</a>
<a href="/blog"
class="ml-4 px-3 py-2 rounded-md text-lg font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Blog</a>
<a href="po"
class="ml-4 px-3 py-2 rounded-md text-lg font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700"></a>
<a href="#"
class="ml-4 px-3 py-2 rounded-md text-lg font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700"></a>
</div>
</div>
</div>
<div class="-mr-2 flex md:hidden">
<button @click="open = !open"
class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:bg-gray-700 focus:text-white">
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path :class="{'hidden': open, 'inline-flex': !open }" class="inline-flex" stroke-linecap="round"
stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
<path :class="{'hidden': !open, 'inline-flex': open }" class="hidden" stroke-linecap="round"
stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
</div>
</div>
<div :class="{'block': open, 'hidden': !open}" class="hidden md:hidden">
<div class="px-2 pt-2 pb-3 sm:px-3">
<a href="/home"
class="block px-3 py-2 rounded-md text-base font-medium text-white bg-gray-900 focus:outline-none focus:text-white focus:bg-gray-700">Home</a>
<a href="/contact"
class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Contact</a>
<a href="/blog"
class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Blog</a>
<a href="#"
class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700"></a>
<a href="#"
class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700"></a>
</div>
<div class="pt-4 pb-3 border-t border-gray-700">
<div class="flex items-center px-5">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="/images/0.jpeg" alt="My Picture" />
</div>
<div class="ml-3">
<div class="text-base font-medium leading-none text-white">Paolo Trulli</div>
<div class="mt-1 text-sm font-medium leading-none text-gray-400">paolo.g.trulli@gmail.com</div>
</div>
</div>
</div>
</nav>
@yield('content')
</body>
</html>联系页面
@extends('layout')
@section('title', 'Contact')
@section('content')
<div class="bg-gray-700 text-center text-lg full-screen pt-6">
<h1 class="pb-8 text-white text-xl">Contact</h1>
<form action="/contact" method="POST">
<div class="justify-center relative">
<label>
<input class="border-2 border-gray-800 border-black h-10 w-1/4" type='text' placeholder="Name"
autocomplete="off">
</label>
</div>
<div class="justify-center pt-4">
<label>
<input class="border-2 border-gray-800 h-10 w-1/4" type="text" placeholder="Email" autocomplete="off">
</label>
</div>
<div class="justify-center pt-4">
<label>
<input class="border-2 border-gray-800 h-20 w-1/4" type="text" placeholder="Type Text Here"
autocomplete="off">
</label>
</div>
@csrf
<div class="text-center pt-6">
<button
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 border border-blue-700 rounded justify-center">
Submit</button>
<h3 class="pt-6 text-white">I will not SPAM you and your data is Safe!</h3>
<div class="bg-cover content-center flex justify-center min-h-50">
<img src="/images/contact.svg" alt="background image">
</div>
</div>
</form>
@include('footer')
@endsection主页
@extends('layout')
@section('title', 'Home')
@section('content')
<main>
<div class="bg-gray-700 text-center text-gray-200 tracking-wider leading-loose h-full">
<h1 class="pt-6 pb-6 text-lg font-semibold">
A Website Built and Designed By Me!
</h1>
<img class="container-sm mx-auto border-2 border-gray-800" src="/images/0.jpeg">
<p class="pt-6 text-base capitalize font-semibold">
Who am I you ask?
</p>
<div class="inline-flex">
<p class="flex-1"></p>
<p class="flex-1 text-center pt-3 text-justify">
I am a father of two, a husband of one, and someone who loves to build things. I tend to find
something I enjoy
get obsessed with it, and ditch if for something new. Rinsing and Repeating the process. My latest
obsession, in
case you didn't notice, creating this website by programming it myself. I have been diving deep into the
world
of coding, although it takes time to learn, and the many frustrating issues along the way, I can say for
certain
I love to learn and build.
</p>
<p class="flex-1"></p>
</div>
<p class="text-center pt-6 capitalize font-semibold">
So what will this site be or provide?</p>
<div class="inline-flex pt-3">
<p class="flex-1"></p>
<p class="flex-1 text-justify">
I plan to <a href="/blog" target="blank" class="text-teal-500">blog</a> about
various topics that interest me. Topics will be random, interesting, and makes me curious. Also, I will
use
this site to showcase a portfolio of work I complete, beginning with this website and adding projects as
I
go.
</p>
<p class="flex-1"></p>
</div>
</div>
</div>
</main>
@include('footer')
@endsection最后一个博客页面
@extends('layout')
@section('title', 'Blog')
@section('content')
<main>
<div class="bg-gray-700 text-center text-gray-700 h-screen text-lg">
<h3 class='text-gray-300 pt-6 text capitalize'>A place where I create posts on random things that interest me
</h3>
<div class="pt-6">
<form action="/blog" method="post">
</div>
<label class=""></label>
<input type="text" name="title" autocomplete="off">
@csrf
<div class="text-center pt-6">
<button
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 border border-blue-700 rounded justify-center">
Add Blog Post</button>
</div>
</form>
<p style="color: red">@error('title') {{ $message }} @enderror</p>
<ul>
@forelse ($blogs as $blog)
<li>{{ $blog->title }}</li>
@empty
<li>
<h3 class="text-center pt-4 text-red-500">No Blog Posts Yet</h3>
</li>
@endforelse
</ul>
</div>
</div>
</main>
@include('footer')
@endsection回答 1
Stack Overflow用户
回答已采纳
发布于 2020-03-19 04:32:00
简单地说，就是不正确的html标签。学到了确保开始标记和结束标记相等的经验。因为我的</div>标签太少，所以我的代码不能正常工作。功劳归于@kerbholz
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60744461
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号