Laravel 7布局问题求助：导航栏(Navbar)与内容区域顺序颠倒

问题出在你错误使用了Blade的模板继承指令@extends来引入局部视图，正确的做法是使用@include指令插入导航栏和消息提示组件。

错误原因 #

@extends是用于继承父模板的指令，它会替换整个页面的模板结构，而不是将指定视图插入到当前位置。你通过@extends('includes.navbar')引入导航栏，相当于让当前页面继承导航栏的结构，后续的内容会被当作子模板内容，最终导致导航栏被挤到内容下方。

修改方案 #

将app.blade.php中的@extends替换为@include：

修改后的app.blade.php代码：

@include('includes.navbar')
<div id="app">
    <main class="py-4 container">
        @include('includes.messages')
        @yield('content')
    </main>
</div>

说明 #

• @include('includes.navbar')：将导航栏视图的内容插入到当前位置，导航栏会正常显示在页面顶部。
• @include('includes.messages')：同理，正确插入消息提示组件。
• @yield('content')：保留原有的内容占位，子页面可以通过@section('content')填充具体内容。

内容的提问来源于stack exchange，提问作者Marshall D. Teach