我@extends()对 Laravel 的功能有疑问。我的观点似乎根本没有扩展布局。我不知道如何解决这个问题。这是主要的布局文件（它位于views>layouts>app.blade.php）： <!DOCTYPE html><html lang="{{ str_replace('_', '-', app()->getLocale()) }}"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- CSRF Token --> <meta name="csrf-token" content="{{ csrf_token() }}"> <title>{{ config('app.name', 'Pet Me') }}</title> <!-- Scripts --> <script src="{{ asset('/js/app.js') }}" defer></script> <!-- Fonts --> <link rel="dns-prefetch" href="//fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet"> <!-- Styles --> <link href="{{ asset('/css/app.css') }}" rel="stylesheet"></head><body><div id="app"> <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm"> <div class="container"> <a class="navbar-brand" href="{{ url('/') }}"> {{ config('app.name', 'Pet Me') }} </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <!-- Left Side Of Navbar --> <ul class="navbar-nav mr-auto"> </ul> <!-- Right Side Of Navbar --> <ul class="navbar-nav ml-auto"> <!-- Authentication Links --> @csrf </form> </div> </li> @endguest </ul> </div> </div> </nav>这是我试图拥有该扩展应用程序的视图之一（位于视图> home.blade.php）：
1 回答
www说
TA贡献1775条经验 获得超8个赞
您的代码正确扩展了布局，因为它显示了<nav>home.blade.php 文件的内容以及内容。在我看来，您的 CSS 加载不正确。
我建议您在控制台中检查 app.css 文件是否正确加载。如果没有，请确保 app.css 文件位于 Laravel 项目根目录的以下路径中 -
public > css > app.css
此外，如果您可以共享控制台的屏幕截图，将会更有帮助。
Laravel 使用 app.css 文件初始化项目，该文件位于 public/css 目录中。该文件只是Bootstrap的 CSS 文件 ( docs ) 的缩小版本。如果您的文件由于某种原因被删除。您可以通过以下方式获得它 -
选项 1 使用引导程序的 css 文件的 CDN。
为此，请替换<link href="{{ asset('/css/app.css') }}" rel="stylesheet"> 为 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">. 你可以从这里获得 CDN 。
选项 2
从这里下载 Bootstrap 。
解压下载的文件夹。
转到 css 文件夹。
复制 bootstrap.min.css 并粘贴到 Laravel 项目的 public/css 文件夹中。
将粘贴的文件重命名为 app.css。
你的 CSS 现在应该加载了。
您的 app.css 的一个可能原因是您执行了该php artisan preset none命令，该命令删除了 Laravel 的默认前端脚手架（docs）。
- 1 回答
- 0 关注
- 188 浏览
添加回答
举报
0/150
提交
取消