时间戳

首页 > 解决方案 > CSS 在刀片中不起作用

laravel - CSS 在刀片中不起作用

问题描述

我今天遇到一个问题：我刚刚创建了一个显示我的 HTML 的新刀片视图，但我的 CSS 不起作用！我尝试了几种方法，例如将其直接放在页面上，将其放在我的布局之外，无事可做……它适用于我工作区中完全相同位置的所有其他页面。

这是我的刀片文件：

@extends('layouts.default')

@section('content')
    <section class="blog-outer-area mt-5">
        <div class="content-area">
            <div class="blog-area-sec">
                <!-- Start: Blog Sec -->
                <div class="blog-sec">
                    <div class="container">
                        <!-- Start:Blog Area -->
                        <div class="blog-inner-area row">
                            <!-- Start:Blog Left Content-->
                            <div class="col-lg-8 left">
                                <div class="item-box">
                                    <div class=" img-holder">
                                        <img src="template/img/home-blog-1.jpg" alt="">
                                    </div>
                                    <div class=" img-holder">
                                        <img src="template/img/home-blog-1.jpg" alt="">
                                    </div>
                                    <div class="info-text-holder">
                                        <h4>{{ $article->titre }}</h4>
                                        <span>{{ $article->created_at->format('d/m/Y') }}</span>
                                        <p>{{ $article->description }}</p>
                                        <ul class="social-icon-simple">
                                            <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <!-- End:Blog Left Content-->

                            <!-- Start:Blog Right Content-->
                            <div class="col-lg-4 ">
                                <div class="right">
                                    <input type="text" name="search" class="search-btn" placeholder="Search Here">

                                    <!-- Start:Recent Posts-->
                                    <h5>Recent posts</h5>
                                    <ul class="recent-post">
                                        <!-- Start:Post 1-->
                                        <li>
                                            <div class="row">
                                                <div class="col-lg-5">
                                                    <img src="template/img/blog-4.jpg" alt="">
                                                </div>
                                                <div class="col-lg-7">
                                                    <div class="text">
                                                        <p><a href="#">Stetina savours Tour de France return</a></p>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <!-- End:Post 1-->
                                        <!-- Start:Post 2-->
                                        <li>
                                            <div class="row">
                                                <div class="col-lg-5">
                                                    <img src="template/img/blog-5.jpg" alt="">
                                                </div>
                                                <div class="col-lg-7">
                                                    <div class="text">
                                                        <p><a href="#">Top Fitness Gear to Help You Workout</a></p>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <!-- End:Post 2-->
                                        <!-- Start:Post 3-->
                                        <li>
                                            <div class="row">
                                                <div class="col-lg-5">
                                                    <img src="template/img/blog-6.jpg" alt="">
                                                </div>
                                                <div class="col-lg-7">
                                                    <div class="text">
                                                        <p><a href="#">The Southern Ocean is the 'newest' named ocean</a></p>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <!-- End:Post 3-->

                                    </ul>
                                    <!-- End:Recent Posts-->

                                </div>
                            </div>
                            <!-- End:Blog Right Content-->
                        </div>
                        <!-- End:Blog Area -->
                    </div>
                </div>
                <!-- End: Blog Sec -->
            </div>
        </div>
    </section>

@endsection

我的布局集成：

<link type="text/css" rel="stylesheet" href="template/css/bootstrap.min.css"><!-- Bootstrap -->
    <link type="text/css" rel="stylesheet" href="template/font-awesome/css/font-awesome.min.css"><!-- font-awesome -->
    <link type="text/css" rel="stylesheet" href="template/css/animate.min.css"><!-- Animation -->
    <link type="text/css" rel="stylesheet" href="template/css/flexslider.css"><!-- FlexSlider CSS -->
    <link type="text/css" rel="stylesheet" href="template/css/style.css"><!-- Light Theme Core CSS -->

    <!-- Google Fonts here -->
    <link href="template/css/fonts/poppins.css" rel='stylesheet' type='text/css'>
    <link href="template/css/fonts/open-sans.css" type='text/css'>
    <link href="template/css/fonts/lato.css" rel='stylesheet' type='text/css'>

我的工作区如下所示：

Vues

我的公共文件夹

标签： laravellaravel-blade

解决方案

试试这个

<link type="text/css" rel="stylesheet" href="/template/css/bootstrap.min.css"><!-- Bootstrap -->
<link type="text/css" rel="stylesheet" href="/template/font-awesome/css/font-awesome.min.css"><!-- font-awesome -->
<link type="text/css" rel="stylesheet" href="/template/css/animate.min.css"><!-- Animation -->
<link type="text/css" rel="stylesheet" href="/template/css/flexslider.css"><!-- FlexSlider CSS -->
<link type="text/css" rel="stylesheet" href="/template/css/style.css"><!-- Light Theme Core CSS -->

<!-- Google Fonts here -->
<link href="/template/css/fonts/poppins.css" rel='stylesheet' type='text/css'>
<link href="/template/css/fonts/open-sans.css" type='text/css'>
<link href="/template/css/fonts/lato.css" rel='stylesheet' type='text/css'>

推荐阅读