Laravel中使用@extend引入导航栏后页面内容显示在导航栏上方问题求助

问题原因 #

你混淆了Blade模板的@extends和@include指令的用法：

• @extends是模板继承指令，用于声明当前模板继承自指定父模板，该指令优先级为模板最高，无论写在文件哪个位置，Laravel都会优先渲染父模板内容，子模板中未包裹在@section中的游离内容会被默认拼接到渲染结果的最顶部，这就是你的内容跑到导航栏上方的原因。
• 仅引入公共复用片段，应该使用@include指令，它会直接将指定模板的内容插入到指令书写的位置。

解决方案1：直接替换引入指令（适合简单复用场景） #

将你代码中的@extends全部替换为@include即可：

<!DOCTYPE html>
<html lang="en">
@include('layout.header')
<style>
</style>
</head>
<body>
@include('layout.navbar')
asdasdsa   
</body>
</html>

解决方案2：使用模板继承规范写法（适合整站统一布局场景） #

更推荐用继承的方式管理整站公共布局，逻辑更清晰：

1. 先编写父布局模板layout/app.blade.php，用@yield预留子页面内容占位：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>@yield('title')</title>
    <!-- 公共CSS、JS引入写在这里 -->
</head>
<body>
    <!-- 公共导航栏直接写在父模板里，不用每个子页面单独引入 -->
    <nav>导航栏公共内容</nav>
    <!-- 子页面内容占位 -->
    @yield('content')
</body>
</html>

2. 子页面模板只需写专属内容，无需重复写HTML结构：

@extends('layout.app')

@section('title', '当前页面标题')
@section('content')
<!-- 当前页面所有自定义内容写在这个区块里 -->
asdasdsa   
@endsection

渲染时子页面的内容会自动填充到父模板@yield('content')的位置，默认显示在导航栏下方。

内容的提问来源于stack exchange，提问作者user15141652