带有laravel项目的CSS无法正常工作(布局用法)

时间:2018-07-10 12:31:04

标签: php css laravel

我对此组织有一个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可以工作了(我的意思是,我的导航器中只有html的输出)!

我通过asset("css/style.css")文件中的layout/index.blade.php方法调用了我的CSS文件!并且所有页面都将调用此文件,因此通常css可能适用于所有页面

我该如何解决?

2 个答案:

答案 0 :(得分:0)

您似乎采用了laravel生成的默认欢迎文件,请检查其他文件是否在开头写了正确的GCL_CBCLSEXTRA而不是SetClassLongPtr

答案 1 :(得分:0)

我发现了我的问题, 它以我使自己扩展的方式而不是“ /”而是“。”。在链接中!

@extends(“ a_propos.index”)