“GET /static/css/bootstrap.min.css.map HTTP/1.1”404 1834答案

【问题标题】："GET /static/css/bootstrap.min.css.map HTTP/1.1" 404 1834“GET /static/css/bootstrap.min.css.map HTTP/1.1”404 1834
【发布时间】：2021-09-29 23:49:31
【问题描述】：

我正在创建 django 站点，我有一些模板，出于某种原因，我在 django 终端中得到了这个。

[29/Sep/2021 23:36:46] "GET /static/css/bootstrap.min.css.map HTTP/1.1" 404 1834

这是我的html代码

   <!-- Core Stylesheet -->
    <link href="{% static 'style.css' %}" rel="stylesheet">

    <!-- Responsive CSS -->
    <link href="{% static 'css/responsive.css' %}" rel="stylesheet">

尝试在此处添加<link href="{% static 'css/bootstrap.min.css.map' %}" rel="stylesheet">，但无法正常工作。还是一样。

这个style.css，正在做这个。

@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700,900');

@import 'css/bootstrap.min.css';
@import 'css/owl.carousel.min.css';
@import 'css/animate.css';
@import 'css/magnific-popup.css';
@import 'css/font-awesome.min.css';

我只收到第一个错误，并且我的网站样式有问题，某些功能无法正常工作。但我得到了，.map 扩展。

我需要做什么？

编辑这是 base.html 大多数 html 代码都在这里。 Flex 无法处理页面的某些部分，我认为这个问题可能是我对 flex 的解决方案。

{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- The above 4 meta tags *must* come first in the head; any other head content must come *after* these tags -->

    <!-- Title -->
    <title>Competitiveness index</title>
    <!-- <title>Eagles flying early | Base</title> -->
    
    <!-- Favicon -->
    <link rel="icon" href= "{% static 'img/core-img/logo_ci.svg' %}"

    <!-- Core Stylesheet -->
    <link href= "{% static 'style.css' %}" rel="stylesheet">

    <!-- Responsive CSS -->
    <link href= "{% static 'css/responsive.css' %}" rel="stylesheet">

    <!-- Bootstrap CSS -->
    <link href= "{% static 'css/bootstrap.min.css' %}" rel="stylesheet">

    <style type="text/css">

    .flex-container {
    display: flex;
    }
    </style>

</head>

<body>
    <!-- ***** Preloader Start ***** -->
    <div id="preloader">
        <div class="mosh-preloader"></div>
    </div>

    <!-- ***** Header Area Start ***** -->
    <header class="header_area">
        <div class="container-fluid h-100">
            <div class="row h-100">
                <!-- Menu Area Start -->
                <div class="col-12 h-100">
                    <div class="menu_area h-100">
                        <nav class="navbar h-100 navbar-expand-lg align-items-center">
                            <!-- Logo -->
                            <a class="navbar-brand" href="index.html"><img src="{% static 'img/core-img/logo_ci.svg' %}" alt="logo" width="50" height="60">Competitiveness index</a>

                            <!-- Menu Area -->
                            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mosh-navbar" aria-controls="mosh-navbar" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>

                            <div class="collapse navbar-collapse justify-content-end" id="mosh-navbar">
                                <ul class="navbar-nav animated" id="nav">
                                    <li class="nav-item active"><a class="nav-link" href="index.html">Home</a></li>
                                    <li class="nav-item dropdown">
                                        <a class="nav-link dropdown-toggle" href="#" id="moshDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Pages</a>
                                        <div class="dropdown-menu" aria-labelledby="moshDropdown">
                                            <a class="dropdown-item" href="index.html">Home</a>
                                            <a class="dropdown-item" href="about.html">About Us</a>
                                            <a class="dropdown-item" href="services.html">Services</a>
                                            <a class="dropdown-item" href="portfolio.html">Portfolio</a>
                                            <a class="dropdown-item" href="blog.html">Blog</a>
                                            <a class="dropdown-item" href="contact.html">Contact</a>
                                            <div class="dropdown-divider"></div>
                                            <a class="dropdown-item" href="elements.html">Elements</a>
                                        </div>
                                    </li>
                                    <li class="nav-item"><a class="nav-link" href="about.html">About Us</a></li>
                                    <li class="nav-item"><a class="nav-link" href="services.html">Services</a></li>
                                    <li class="nav-item"><a class="nav-link" href="portfolio.html">Portfolio</a></li>
                                    <li class="nav-item"><a class="nav-link" href="blog.html">Blog</a></li>
                                    <li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
                                </ul>
                                <!-- Search Form Area Start -->
                                <div class="search-form-area animated">
                                    <form action="#" method="post">
                                        <input type="search" name="search" id="search" placeholder="Type keywords &amp; hit enter">
                                        <button type="submit" class="d-none"><img src="{% static 'img/core-img/search-icon.png' %}" alt="Search"></button>
                                    </form>
                                </div>

                            </div>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <!-- ***** Header Area End ***** -->

    <!-- ***** Breadcumb Area Start ***** -->
    <div class="mosh-breadcumb-area" style="background-image: url({% static 'img/core-img/breadcumb.png' %})">
        <div class="container h-100">
            <div class="row h-100 align-items-center">
                <div class="col-12">
                    <div class="bradcumbContent">
                        <h2>{{page_title}}</h2>
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="#">Home</a></li>
                                <li class="breadcrumb-item active" aria-current="page">{{page_title}}</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- ***** Breadcumb Area End ***** -->



    
    {% block content %}{% endblock %}




    <!-- ***** Footer Area Start ***** -->
    <footer class="footer-area clearfix">
        <!-- Top Fotter Area -->
        <div class="top-footer-area section_padding_100_0">
            <div class="container">
                <div class="row">
                    <div class="col-12 col-sm-6 col-lg-3">
                        <div class="single-footer-widget mb-100">
                            <a href="#" class="mb-50 d-block"><img src="{% static 'img/core-img/logo_ci.svg' %}" width= 100 height=100 alt=""></a>
                            <p>Etiam nec odio vestibulum est mattis effic iturut magna. Pellent esque sit amet tellus blandit. Etiam nec odio vestibul.</p>
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-lg-3">
                        <div class="single-footer-widget mb-100">
                            <h5>Fast links</h5>
                            <ul>
                                <li><a href="#">Home</a></li>
                                <li><a href="#">Testimonials</a></li>
                                <li><a href="#">Services &amp; Features</a></li>
                                <li><a href="#">Accordions and tabs</a></li>
                                <li><a href="#">Menu ideas</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-lg-3">
                        <div class="single-footer-widget mb-100">
                            <h5>Blog</h5>
                            <div class="footer-single--blog-post">
                                <a href="#" class="blog-post-date">
                                    <p>23 September, 2017</p>
                                </a>
                                <a href="#" class="blog-post-title">
                                    <h6>Why we love stock photos</h6>
                                </a>
                            </div>
                            <div class="footer-single--blog-post">
                                <a href="#" class="blog-post-date">
                                    <p>22 September, 2017</p>
                                </a>
                                <a href="#" class="blog-post-title">
                                    <h6>Designin on grid. A few rules. </h6>
                                </a>
                            </div>
                            <div class="footer-single--blog-post">
                                <a href="#" class="blog-post-date">
                                    <p>20 September, 2017</p>
                                </a>
                                <a href="#" class="blog-post-title">
                                    <h6>2017 World Design Congress</h6>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-lg-3">
                        <div class="single-footer-widget mb-100">
                            <h5>Contact Info</h5>
                            <div class="footer-single-contact-info d-flex">
                                <div class="contact-icon">
                                    <img src="img/core-img/message.png" alt="">
                                </div>
                                <p>office@yourbusiness.com</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Fotter Bottom Area -->
        <div class="footer-bottom-area">
            <div class="container h-100">
                <div class="row h-100">
                    <div class="col-12 h-100">
                        <div class="footer-bottom-content h-100 d-md-flex justify-content-between align-items-center">
                            <div class="copyright-text d-flex"><p>
Copyright &copy;<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib</a>
</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </footer>
    <!-- ***** Footer Area End ***** -->

    <!-- ***** Footer Area End ***** -->
    <!-- jQuery-2.2.4 js -->
    <script type="text/javascript" src="{% static 'js/jquery-2.2.4.min.js' %}"></script>
    <!-- Popper js -->
    <script type="text/javascript" src="{% static 'js/popper.min.js' %}"></script>
    <!-- Bootstrap js -->
    <script type="text/javascript" src="{% static 'js/bootstrap.min.js' %}"></script>
    <!-- All Plugins js -->
    <script type="text/javascript" src="{% static 'js/plugins.js' %}"></script>
    <!-- Active js -->
    <script type="text/javascript" src="{% static 'js/active.js' %}"></script>
</body>

</html>

【问题讨论】：

您是否将bootstrap 添加到您的settings.py INSTALLED_APPS 变量中？
现在我做到了，但还是一样。
实际是bootstrap4 或bootstrap5 取决于你使用的版本。
是的，bootstrap4，还是一样，我认为这可能是一个静态问题，基于论坛上的阅读。
你是通过pip install安装的吗？

标签： html css django

【解决方案1】：

我假设您有一个 base.html 可以继承到您的其他模板中，如果是这样，请检查您是否具有以下结构：

    <head>
        {% block bootsrap %}
            {% load bootstrap4 %}
 
            {# CSS Bootstrap #}
            {% bootstrap_css %} 
        {% endblock bootsrap %}
        <meta charset="UTF-8">

        <title></title>

        {% comment %} Styles CSS {% endcomment %}
        <link rel="stylesheet" href="{% static 'css/normalize.css' %}">
        <link rel="stylesheet" href="{% static 'css/modified.css' %}">
        <link rel="stylesheet" href="{% static 'css/style.css' %}">
    </head>

就我所见，您缺少{% load bootstrap4 %} 和{%bootstrap_css %}。希望对您有所帮助，如果没有，请告诉我，以便我再次尝试调试。

【讨论】：

谢谢，我不知道这个。我不再收到消息了。仍然 flex 不起作用，我想这不是导致弯曲问题。