我有这个组织的 laravel 元素供我查看:
view/
----- layout/
----- ----- index.blade.php ( the main file where i call, another by extend )
----- service/
----- ----- index.blade.php (service page )
----- about_us/
----- ----- index.blade.php ( about page )
----- home/
----- ----- welcome.blade.php (my home page )
我的路线文件:
Route::get('/', function () {
return view('home/welcome');
});
Route::get('/a_propos', function () {
return view('a_propos/index');
})->name('a_propos');
Route::get('/team', function () {
return view('team/index');
})->name('team');
Route::get('/avis_clients', function () {
return view('avis_clients/index');
})->name('avis_clients');
Route::get('/nos_services', function () {
return view('nos_services/index');
})->name('services');
Route::get('/blog', function () {
return view('blog/index');
})->name('blog');
Route::get('/article', function () {
return view('blog/show');
})->name('article');
Route::get('/contacts', function () {
return view('contacts/index');
})->name('contacts');
Route::get('/faq', function () {
return view('faq/index');
})->name('faq');
我的服务页面看起来像:
@extends("layouts/index")
@section("content")
<!-- Start breadcumb Area -->
<div class="page-area">
<div class="breadcumb-overlay"></div>
<div class="container">
<div class="row">
.......
JUST MORE OF HTML
.......
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Service area -->
@endsectionthis is the content of my main layout file
<!doctype html>
<html class="no-js" lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>HR CONSULTING & CO</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- favicon -->
<link rel="shortcut icon" type="image/x-icon" href="img/logo/favicon.ico">
<!-- all css here -->
<!-- bootstrap v3.3.6 css -->
<link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}">
<!-- owl.carousel css -->
<link rel="stylesheet" href="{{ asset('css/owl.carousel.css') }}">
<link rel="stylesheet" href="{{ asset('css/owl.transitions.css') }}">
<!-- meanmenu css -->
<link rel="stylesheet" href="{{ asset('css/meanmenu.min.css') }}">
<!-- font-awesome css -->
<link rel="stylesheet" href="{{ asset('css/font-awesome.min.css') }}">
<link rel="stylesheet" href="{{ asset('css/icon.css') }}">
<link rel="stylesheet" href="{{ asset('css/flaticon.css') }}">
<!-- magnific css -->
<link rel="stylesheet" href="{{ asset('css/magnific.css') }}">
<!-- venobox css -->
<link rel="stylesheet" href="{{ asset('css/venobox.css') }}">
<!-- style css -->
<link rel="stylesheet" href="{{ asset('css/style.css') }}">
<!-- responsive css -->
<link rel="stylesheet" href="{{ asset('css/responsive.css') }}">
<!-- modernizr css -->
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div id="preloader"></div>
<header>
<!-- Start top bar -->
<div class="topbar-area fix hidden-xs">
<div class="container">
<div class="row">
<div class=" col-md-8 col-sm-8">
<div class="topbar-left">
<ul>
<li><a href="#"><i class="fa fa-map-marker"></i> House-4,2/3 avenew,Dubai</a></li>
<li><a href="#"><i class="fa fa-envelope"></i> info@nigocio.com</a></li>
<li><a href="#"><i class="fa fa-phone"></i>+0133 6454 432</a></li>
</ul>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="topbar-right">
<div class="top-social">
<ul>
<li><a href="#"><i class="fa fa-skype"></i></a></li>
<li><a href="#"><i class="fa fa-pinterest"></i></a></li>
<li><a href="#"><i class="fa fa-google"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End top bar -->
<!-- header-area start -->
<div id="sticker" class="header-area hidden-xs">
<div class="container">
<div class="row">
<!-- logo start -->
<div class="col-md-3 col-sm-3">
<div class="logo">
<!-- Brand -->
<a class="navbar-brand page-scroll sticky-logo" href="index-2.html">
<img src="img/logo/logo.png" alt="">
</a>
</div>
</div>
<!-- logo end -->
<div class="col-md-9 col-sm-9">
<div class="header-right-link">
<!-- search option start -->
<form action="#">
<div class="search-option">
<input type="text" placeholder="Search...">
<button class="button" type="submit"><i class="fa fa-search"></i></button>
</div>
<a class="main-search" href="#"><i class="fa fa-search"></i></a>
</form>
<!-- search option end -->
</div>
<!-- mainmenu start -->
<nav class="navbar navbar-default">
<div class="collapse navbar-collapse" id="navbar-example">
<div class="main-menu">
<ul class="nav navbar-nav navbar-right">
<li><a class="pagess" href="index-2.html">Home</a>
<ul class="sub-menu">
<li><a href="index-2.html">Home 01</a></li>
<li><a href="index-3.html">Home 02</a></li>
<li><a href="index-4.html">Home 03</a></li>
</ul>
</li>
<li><a class="pagess" href="#">About us</a>
<ul class="sub-menu">
<li><a href="about.html">About us</a></li>
<li><a href="team.html">Team</a></li>
<li><a href="review.html">Review</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="error.html">Error</a></li>
</ul>
</li>
<li><a class="pagess" href="#">Services</a>
<ul class="sub-menu">
<li><a href="services.html">Services 01</a></li>
<li><a href="services-2.html">Services 02</a></li>
<li><a href="single-service.html">Services Details</a></li>
</ul>
</li>
<li><a class="pagess" href="#">Projects</a>
<ul class="sub-menu">
<li><a href="project-2.html">Project 2 Column</a></li>
<li><a href="project-3.html">Project 3 Column</a></li>
<li><a href="project-4.html">Project 4 Column</a></li>
<li><a href="single-project.html">Project Details</a></li>
</ul>
</li>
<li><a class="pagess" href="#">Blog</a>
<ul class="sub-menu">
<li><a href="blog.html">Blog</a></li>
<li><a href="blog-sidebar.html">Blog Sidebar</a></li>
<li><a href="blog-details.html">Blog Details</a></li>
</ul>
</li>
<li><a href="contact.html">contacts</a></li>
</ul>
</div>
</div>
</nav>
<!-- mainmenu end -->
</div>
</div>
</div>
</div>
<!-- header-area end -->
<!-- mobile-menu-area start -->
<div class="mobile-menu-area hidden-lg hidden-md hidden-sm">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="mobile-menu">
<div class="logo">
<a href="index-2.html"><img src="img/logo/logo.png" alt="" /></a>
</div>
<nav id="dropdown">
<ul>
<li><a class="pagess" href="index-2.html">Home</a>
<ul class="sub-menu">
<li><a href="index-2.html">Home 01</a></li>
<li><a href="index-3.html">Home 02</a></li>
<li><a href="index-4.html">Home 03</a></li>
</ul>
</li>
<li><a class="pagess" href="#">About us</a>
<ul class="sub-menu">
<li><a href="{{ route('a_propos') }}">A propos</a></li>
<li><a href="{{ route('team') }}">Equipe</a></li>
<li><a href="{{ route('avis_clients') }}">Avis clients</a></li>
<li><a href="{{ route('faq') }}">FAQ</a></li>
<li><a href="error.html">Error</a></li>
</ul>
</li>
<li><a class="pagess" href="{{ route('services') }}">Services</a>
<ul class="sub-menu">
<li><a href="services.html">Services 01</a></li>
<li><a href="services-2.html">Services 02</a></li>
<li><a href="single-service.html">Services Details</a></li>
</ul>
</li>
<li><a class="pagess" href="#">Projects</a>
<ul class="sub-menu">
<li><a href="project-2.html">Project 2 Column</a></li>
<li><a href="project-3.html">Project 3 Column</a></li>
<li><a href="project-4.html">Project 4 Column</a></li>
<li><a href="single-project.html">Project Details</a></li>
</ul>
</li>
<li><a class="pagess" href="{{ route('blog') }}">Blog</a>
<ul class="sub-menu">
<li><a href="blog.html">Blog</a></li>
<li><a href="blog-sidebar.html">Blog Sidebar</a></li>
<li><a href="blog-details.html">Blog Details</a></li>
</ul>
</li>
<li><a href="contact.html">contacts</a></li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
<!-- mobile-menu-area end -->
</header>
<!-- header end -->
@yield('content')
<!-- Start Footer bottom Area -->
<footer>
<div class="footer-area">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-4 col-xs-12">
<div class="footer-content">
<div class="footer-head">
<h4>information</h4>
<p>
You can contact us our consectetur adipisicing elit.
</p>
<div class="footer-contacts">
<p><span>Tel:</span> +0133 6454 432</p>
<p><span>Email:</span>info@nigocio.com</p>
<p><span>Location:</span>House-4,2/3 avenew,Dubai</p>
</div>
<div class="footer-icons">
<ul>
<li>
<a href="#">
<i class="fa fa-facebook"></i>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-twitter"></i>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-google"></i>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-pinterest"></i>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-instagram"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- end single footer -->
<div class="col-md-3 hidden-sm col-xs-12">
<div class="footer-content">
<div class="footer-head">
<h4>Services Link</h4>
<ul class="footer-list">
<li><a href="#">Business</a></li>
<li><a href="#">Factory </a></li>
<li><a href="#">ICT Manegment</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Energy</a></li>
<li><a href="#">Environment</a></li>
<li><a href="#">Bank</a></li>
</ul>
</div>
</div>
</div>
<!-- end single footer -->
<div class="col-md-3 col-sm-4 col-xs-12">
<div class="footer-content">
<div class="footer-head">
<h4>Recent Post</h4>
<div class="single-blog">
<div class="blog-content">
<div class="blog-title">
<a href="#">
<h4>Business manegment</h4>
</a>
</div>
<div class="blog-text">
<p>Redug Lagre dolor sit amet, consectetur adipisicing elit..</p>
<a class="blog-btn" href="#">Read more</a>
</div>
</div>
</div>
<div class="single-blog">
<div class="blog-content">
<div class="blog-title">
<a href="#">
<h4>Business consultant services</h4>
</a>
</div>
<div class="blog-text">
<p>Redug Lagre dolor sit amet, consectetur adipisicing elit..</p>
<a class="blog-btn" href="#">Read more</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end single footer -->
<div class="col-md-3 col-sm-4 col-xs-12">
<div class="footer-content last-content">
<div class="footer-head">
<h4>Subscribe</h4>
<p>
Are you looking for professional advice for your new business.Are you looking for professional advice for your new business
</p>
<div class="subs-feilds">
<div class="suscribe-input">
<input type="email" class="email form-control width-80" id="sus_email" placeholder="Type Email">
<button type="submit" id="sus_submit" class="add-btn">Subscribe</button>
</div>
</div>
</div>
</div>
</div>
<!-- end single footer -->
</div>
</div>
</div>
<div class="footer-area-bottom">
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="copyright">
<p>
Copyright © 2018
<a href="#">Nigocio</a> All Rights Reserved
</p>
</div>
</div>
</div>
</div>
</div>
</footer>
<!-- all js here -->
<!-- jquery latest version -->
<script src="js/vendor/jquery-1.12.4.min.js"></script>
<!-- bootstrap js -->
<script src="js/bootstrap.min.js"></script>
<!-- owl.carousel js -->
<script src="js/owl.carousel.min.js"></script>
<!-- Counter js -->
<script src="js/jquery.counterup.min.js"></script>
<!-- waypoint js -->
<script src="js/waypoints.js"></script>
<!-- isotope js -->
<script src="js/isotope.pkgd.min.js"></script>
<!-- stellar js -->
<script src="js/jquery.stellar.min.js"></script>
<!-- magnific js -->
<script src="js/magnific.min.js"></script>
<!-- venobox js -->
<script src="js/venobox.min.js"></script>
<!-- meanmenu js -->
<script src="js/jquery.meanmenu.js"></script>
<!-- Form validator js -->
<script src="js/form-validator.min.js"></script>
<!-- plugins js -->
<script src="js/plugins.js"></script>
<!-- main js -->
<script src="js/main.js"></script>
</body>
</html>我的问题是，对于我的第一页，我的 css 正常工作，但是当我尝试访问另一个页面时，我的 css dosent 工作(我的意思是我的导航器中只有 html 输出)!
我通过 layout/index.blade.php 文件中的 asset("css/style.css") 方法调用我的 css 文件!并且所有页面都会调用此文件，因此正常的 css 可能适用于所有页面
我该如何解决？
最佳答案
看起来你使用了 laravel 生成的默认欢迎文件，如果你写的是正确的 @extends('layout.index') 而不是 @extend( 'layout.index')开头
关于php - Laravel 元素的 Css 不起作用(布局使用)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51265284/