今天，我只是尝试测试我的代码，却出现了一个奇怪的问题。 我有一个应用刀片可以用作我的yied或共享的页眉和页脚 代码是这个
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<title>Diva - Beauty salon template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Favicon -->
<link href="img/favicon.ico" rel="shortcut icon">
<!-- Stylesheets -->
<link rel="stylesheet" href="css/bts.css">
<link rel="stylesheet" href="css/style.css">
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Page Preloder -->
<div id="preloder" style="display: none;">
<div class="loader" style="display: none;"></div>
</div>
<!-- Header section -->
<header class="header-section" dir="rtl">
<div class="header-warp">
<!-- logo -->
<a href="home.html" class="site-logo">
<img src="img/logo.png" alt="">
</a>
<!-- responsive -->
<div class="nav-switch">
<i class="fa fa-bars"></i>
</div>
<!-- Navigation Menu -->
<ul class="main-menu">
<li class="active"><a href="/home">{{ __('general.Anohe') }}</a></li>
<li><a href="about.html">{{ __('general.about-us')}}</a></li>
<li><a href="services.html">{{ __('general.sell-place') }}</a></li>
<li><a href="blog.html">{{ __('general.about') }}</a></li>
<li><a href="/page/contact-us">{{ __('general.contact-with-us') }}</a></li>
</ul>
<div class="header-right mb-4">
<a href="" class="site-btn sb-line sb-big">09359127500</a>
<a href="/home" class="site-btn sb-big">{{ __('general.menu') }}</a>
</div>
</div>
</header>
<!-- Header section end -->
<div class="container">
@include('...shared.message')
<div class="card-deck mb-3 text-center">
@yield('content')
</div>
</div>
<!-- Footer section end -->
<!-- Footer -->
<footer class="footer">
<div class="container bottom_border">
<div class="row">
<div class=" col-sm-4 col-md col-sm-4 col-12 col">
<h5 class="headin5_amrc col_white_amrc pt2">Find us</h5>
<!--headin5_amrc-->
<p class="mb10">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<p><i class="fa fa-location-arrow"></i> 9878/25 sec 9 rohini 35 </p>
<p><i class="fa fa-phone"></i> +91-9999878398 </p>
<p><i class="fa fa fa-envelope"></i> info@example.com </p>
</div>
<div class=" col-sm-4 col-md col-6 col">
<h5 class="headin5_amrc col_white_amrc pt2">Quick links</h5>
<!--headin5_amrc-->
<ul class="footer_ul_amrc">
<li><a href="http://kalarikendramdelhi.com">Image Rectoucing</a></li>
<li><a href="http://kalarikendramdelhi.com">Clipping Path</a></li>
<li><a href="http://kalarikendramdelhi.com">Hollow Man Montage</a></li>
<li><a href="http://kalarikendramdelhi.com">Ebay & Amazon</a></li>
<li><a href="http://kalarikendramdelhi.com">Hair Masking/Clipping</a></li>
<li><a href="http://kalarikendramdelhi.com">Image Cropping</a></li>
</ul>
<!--footer_ul_amrc ends here-->
</div>
<div class=" col-sm-4 col-md col-6 col">
<h5 class="headin5_amrc col_white_amrc pt2">Quick links</h5>
<!--headin5_amrc-->
<ul class="footer_ul_amrc">
<li><a href="http://kalarikendramdelhi.com">Remove Background</a></li>
<li><a href="http://kalarikendramdelhi.com">Shadows & Mirror Reflection</a></li>
<li><a href="http://kalarikendramdelhi.com">Logo Design</a></li>
<li><a href="http://kalarikendramdelhi.com">Vectorization</a></li>
<li><a href="http://kalarikendramdelhi.com">Hair Masking/Clipping</a></li>
<li><a href="http://kalarikendramdelhi.com">Image Cropping</a></li>
</ul>
<!--footer_ul_amrc ends here-->
</div>
<div class=" col-sm-4 col-md col-12 col">
<h5 class="headin5_amrc col_white_amrc pt2">Follow us</h5>
<!--headin5_amrc ends here-->
<ul class="footer_ul2_amrc">
<li><a href="#"><i class="fab fa-twitter fleft padding-right"></i> </a><p>Lorem Ipsum is simply dummy text of the printing...<a href="#">https://www.lipsum.com/</a></p></li>
<li><a href="#"><i class="fab fa-twitter fleft padding-right"></i> </a><p>Lorem Ipsum is simply dummy text of the printing...<a href="#">https://www.lipsum.com/</a></p></li>
<li><a href="#"><i class="fab fa-twitter fleft padding-right"></i> </a><p>Lorem Ipsum is simply dummy text of the printing...<a href="#">https://www.lipsum.com/</a></p></li>
</ul>
<!--footer_ul2_amrc ends here-->
</div>
</div>
</div>
<div class="container">
<ul class="foote_bottom_ul_amrc">
<li><a href="http://kalarikendramdelhi.com">Home</a></li>
<li><a href="http://kalarikendramdelhi.com">About</a></li>
<li><a href="http://kalarikendramdelhi.com">Services</a></li>
<li><a href="http://kalarikendramdelhi.com">Pricing</a></li>
<li><a href="http://kalarikendramdelhi.com">Blog</a></li>
<li><a href="http://kalarikendramdelhi.com">Contact</a></li>
</ul>
<!--foote_bottom_ul_amrc ends here-->
<p class="text-center">Copyright @2017 | Designed With by <a href="#">Your Company Name</a></p>
<ul class="social_footer_ul">
<li><a href="http://kalarikendramdelhi.com"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="http://kalarikendramdelhi.com"><i class="fab fa-twitter"></i></a></li>
<li><a href="http://kalarikendramdelhi.com"><i class="fab fa-linkedin"></i></a></li>
<li><a href="http://kalarikendramdelhi.com"><i class="fab fa-instagram"></i></a></li>
</ul>
<!--social_footer_ul ends here-->
</div>
</footer>
<!-- Footer -->
<!--====== Javascripts & Jquery ======-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/circle-progress.min.js"></script>
<script src="js/main.js"></script><div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>
</body></html>
和另外两个带有部分的页面 第一页
@extends('layouts.app')
@section('content')
<div dir="rtl" >
<div class="d-flex d-inline-flex" style="width: 100%; height: 300px;">
<div class="shadow-sm border d-block h-100" style="width: 20%; ">
<p>
منو
</p>
<div class="w-100 mb-2"><a href="" style=" color: #000000">پوشاک</a><p class="fa fa-angle-left float-left ml-2"></p></div>
<div class="w-100 mb-2"><a href="" style=" color: #000000">الکترونیکی</a><p class="fa fa-angle-left float-left ml-2"></p></div>
<div class="w-100 mb-2"><a href="" style=" color: #000000">کتای</a><p class="fa fa-angle-left float-left ml-2"></p></div>
<div class="w-100 mb-2"><a href="" style=" color: #000000">بازی و سرگرمی</a><p class="fa fa-angle-left float-left ml-2"></p></div>
</div>
<div class="shadow border mr-3 h-100" style="width: 80%;">
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img style="height: 300px;width: 100%" src="http://smarterware.org/wp-content/uploads/2016/09/technology1.jpg" alt="Los Angeles">
</div>
<div class="carousel-item">
<img style="height: 300px;width: 100%" src="https://www.cmo.com/content/dam/CMO/Home%20Page/1046x616_Modern-Commerce-2.0-Technology-Sets-The-Stage-For-A-New-Round-Of-Disruption.jpg" alt="Chicago">
</div>
<div class="carousel-item">
<img style="height: 300px;width: 100%" src="https://sohopress.com/wp-content/uploads/2018/05/web-summit-feature_1200x675_hero_110717.jpg" alt="New York">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
</div>
<div class="shadow border mt-3">
<p>
ایران نت
</p>
<hr style="border-color: #bdbdbd;">
</div>
<div class="d-flex d-inline-flex" style="width: 100%">
<div class="shadow border mt-3" style="width: 20%">
<p>
آخرین اخبار
</p>
<hr style="border-color: #ff8a05">
<ul class="list-group">
<li class="list-group-item" style="height: 60px; text-overflow: ellipsis; white-space: nowrap;overflow: hidden; word-wrap: break-word;"><a href="/news"> شاسی بلند لامبورگینی اوروس با تیونینگ TopCar معرفی شد </a></li>
<li class="list-group-item" style="height: 60px; text-overflow: ellipsis; white-space: nowrap;overflow: hidden; word-wrap: break-word;"><a href="/news1"> اینتل دانگل هوش مصنوعی جدید خود را معرفی کرد </a></li>
<li class="list-group-item" style="height: 60px; text-overflow: ellipsis; white-space: nowrap;overflow: hidden; word-wrap: break-word;"><a href="/news2"> چهارمین همایش آینده وب و موبایل </a></li>
<li class="list-group-item" style="height: 60px; text-overflow: ellipsis; white-space: nowrap;overflow: hidden; word-wrap: break-word;"><a href="/news3"> بزرگترین کارخانه تولید داروهای ضدسرطان خاورمیانه در ایران افتتاح شد </a></li>
<li class="list-group-item" style="height: 60px; text-overflow: ellipsis; white-space: nowrap;overflow: hidden; word-wrap: break-word;"><a href="/news4"> جگوار لندرور در صنعت موتورسیکلت سرمایهگذاری میکند </a></li>
</ul>
</div>
<div class="shadow border mt-3 mr-3" style="width: 80%; height: 350px">
<img class="w-100 h-100" src="https://boygeniusreport.files.wordpress.com/2018/06/fortnite.jpg?quality=98&strip=all&w=782"/>
</div>
</div>
<div class="shadow border mt-3">
<p>
جدید ترین ها
</p>
<hr style="border-color: #bdbdbd;">
<div class=" d-inline-flex" style="height: 300px">
@foreach($products as $product)
<div class="w-25 m-2">
<div class="h-50 p-2">
<img class="w-75 h-100" style="border-radius: 20px;" src="/image/products/{{$product->id}}product1.jpg"/>
</div>
<div class="p-2" style=" overflow: hidden; word-wrap: normal; height: 35%;">
<a href="">{{$product->pname}}</a>
<p>{{$product->description}} </p>
</div>
<a href="" class="text-secondary font-weight-light">توضیحات محصول</a>
</div>
@endforeach
</div>
</div>
<div class="shadow border mt-3">
<p>
دیجیکالا
</p>
<hr style="border-color: #bdbdbd;">
<div class=" d-inline-flex">
@if(isset($Dproducts))
@foreach($Dproducts as $product)
<div class="w-25 border m-2">
<div class="h-50 p-2 border">
<img class="w-100 h-100" src="/image/products/{{$product->id}}product1.jpg"/>
</div>
<div class="h-25 p-2 border">
<a href="">{{$product->pname}}</a>
<p style=" overflow: hidden; word-wrap: break-word;">{{$product->description}} </p>
</div>
<a href="" class="text-secondary font-weight-light">توضیحات محصول</a>
</div>
@endforeach
@endif
</div>
</div>
</div>
@endsection
第二页
@extends('layouts.app')
@section('content')
<div class="container">
<h2 class="text-center">Contac Form</h2>
<div class="row justify-content-center">
<div class="col-12 col-md-8 col-lg-6 pb-5">
<div class="container">
<h1>Contact US Form</h1>
@if(Session::has('success'))
<div class="alert alert-success">
{{ Session::get('success') }}
</div>
@endif
<form method="post" action="{{route('contactus.store')}}" enctype="multipart/form-data">
{{ csrf_field() }}
<div class="form-group {{ $errors->has('name') ? 'has-error' : '' }}">
<label>Name</label>
<input type="text" name="name" id="name" placeholder="Enter Name" class="form-control" value="{{old('name')}}">
<span class="text-danger">{{ $errors->first('name') }}</span>
</div>
<div class="form-group {{ $errors->has('email') ? 'has-error' : '' }}">
<label>Email</label>
<input type="text" name="email" id="email" placeholder="Enter Email" class="form-control" value="{{old('email')}}">
<span class="text-danger">{{ $errors->first('email') }}</span>
</div>
<div class="form-group {{ $errors->has('message') ? 'has-error' : '' }}">
<label>Message</label>
<textarea type="text" name="message" id="message" placeholder="Enter Message" class="form-control" value="{{old('message')}}"></textarea>
<span class="text-danger">{{ $errors->first('message') }}</span>
</div>
<div class="form-group">
<button class="btn btn-success">Contact US!</button>
</div>
</form>
</div>
<!--Form with header-->
</div>
</div>
</div>
@include('...shared.errors')
@endsection
问题是我共享的刀片服务器在我的第一页工作正常，但是在我的第二页CSS文件无效。 我对自己进行了很多测试，发现当我的地址栏超过一个时，就会发生此问题。 我的第一页路线是/ home，我的第二页路线是/ page / about
答案 0 :(得分：1)
@yield没什么问题，问题在于您在CSS文件中使用的是 relative 路径，因此，如果页面位于文件夹中，则URL将会无效。 / p>
相反，使用Laravel中的url()帮助程序将应用程序的基本URL自动添加到CSS URL：
<link rel="stylesheet" href="{{ url('css/bts.css') }}">
<link rel="stylesheet" href="{{ url('css/style.css') }}">