在其他刀片中包含导航栏刀片使CSS“在Laravel”中发生冲突！

 admin  2023-05-26
Share: Twitter Facebook Pinterest Reddit VK Digg Linkedin Mix

我有一个导航刀片模板，并应包括此刀片到所有刀片文件。

当我包含这个时，我的导航刀片的元素从其他刀片文件中获取CSS样式，相互之间的其他刀片获得导航刀片的CSS样式。如果我没记错的话，CSS冲突就发生了。

是否可以强制元素接收/不接收来自源的CSS样式！？这是我的主刀：

<html lang="{{php app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

{{-- Part: all meta-related contents --}}
@yield('head-meta')

{{-- Part: site title with default value in parent --}}
@section('head-title')
    <title>Site title</title>
@stop
{{-- Part: load fonts --}}
@yield('head-fonts')
{{-- Part: load styles for the page --}}
@yield('head-styles')
{{-- Part: load scripts needed --}}
@yield('head-scripts')
{{-- Part: anything else in head --}}
@yield('head-extra')
</head>

<body>

{{-- Part: something at start of body --}}
@yield('body-start')

{{-- Part: header of body --}}
@section('body-header')
    {{-- Part: navigation bar --}}
    @include('navbar')
@show

{{-- Part: create main content of the page --}}
@yield('body-content')

{{-- Part: footer --}}
@section('body-footer')
    {{-- Part: footer is probably shared across many pages --}}
    {{--@include('partials.footer')--}}
@show

{{-- Part: load scripts --}}
@yield('body-scripts')
{{-- Part: something else to do --}}
@yield('body-others')
{{-- Part: finalize stuffs if there is --}}
@yield('body-end')

</body>
</html>

它是我的主刀锋：

@extends('master')
@section('head-title')
    <title>{{__('messages.title')}}</title>
@stop

@section('head-styles')
    <!-- Bootstrap -->
    <link rel="stylesheet" href="/css/en/bootstrap.min.css">

    <!-- Definity CSS -->
    <link rel="stylesheet" href="/css/en/main.css">
    <link rel="stylesheet" href="/css/en/responsive.css">
@stop


@section('body-content')
    <!-- ========== Preloader ========== -->
    <div class="preloader">
        <img src="/images/loader.svg" alt="Loading...">
    </div>
@stop

@section('body-scripts')
    <!-- ========== Scripts ========== -->
    <script src="js/jquery-2.1.4.min.js"></script>

    <!-- Definity JS -->
    <script src="js/hero/main.js"></script>
@endsection

最后，这是我的导航栏(导航栏)刀片：

<!doctype html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/hamburgers.min.css">
    <link rel="stylesheet" href="/css/font-awesome-5.2.min.css">
    <link rel="stylesheet" href="/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/languageSwitcher.css">

    <script src="/js/jquery.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/core.js"></script>
    <script src="/js/modernizr.min.js"></script>

   <title>{{__('messages.title')}}</title>
</head>
<div class="container">
    <nav class="navbar navbar-expand-lg">
*
*
*
</nav>
</div>

转载请注明出处:http://www.songfuwangmfj.com/article/20230526/2069463.html