小贝子编程

带有 laravel 项目的 css 不起作用(布局使用)



我有一个与这个组织的 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 -->
@endsection

this 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')，请检查您的其他文件

我发现了我的问题， 它的方式是我使我的扩展不是"/"，而是链接中的".！

@extends("a_propos.index")

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium