为什么我的自定义 CSS 样式表会覆盖我的引导网页设计 - symfony 5？答案

【问题标题】：Why my custome CSS stylesheet override my bootstrap web design - symfony 5?为什么我的自定义 CSS 样式表会覆盖我的引导网页设计 - symfony 5？
【发布时间】：2021-08-11 00:38:31
【问题描述】：

我想将自定义 CSS 文件添加到我的网页。但是，当我这样做时，我之前添加的引导 CSS 将被覆盖，我的页面看起来很丑陋。所以我的问题是如何在不丢失我使用引导程序创建的设计的情况下向 HTML 标记添加一些自定义 CSS 属性。

注意：我正在使用带有 twig 模板的 Symfony 5，并且未安装引导程序我使用的是 cdn。

这是我的代码：

showlist.html.twig 扩展自 base.html.twig

{% extends 'base.html.twig' %}
{% block body %}
<div class="container mt-5">
    <h3 style="color: #297323">Liste des annonces publiées :</h3>
    <div class="row pt-4">
        {% for announce in announces  %}
        <div class="col-4">
            <div id="card" class="card mb-5" style="width: 20rem; border-color: #297323;"><a href="#" style="text-decoration: none; color: black;">
                <h5 class="pt-3 px-3">{{ announce.title }}</h5>
                <p class="px-3" style="color: #AAAAAA">Rédigé le {{ announce.createdAt | date("d/m/Y") }}</p>
                <div class="card-body" style="padding-top: 0">
                    <p class="card-text">{{ announce.content | u.truncate(100, ' ... ') }}<span><a href="{{ path('show_one_announcement') }}" style="color: #297323">Lire la suite</a></span></p>
                </div>
            </a></div>
        </div>
        {% endfor %}
    </div>
{% endblock %}

{% block title %}

{% endblock %}

base.html.twig：

<!DOCTYPE html>
<html>
<head>

    <meta charset="UTF-8">
    <title>{% block title %}Welcome!{% endblock %}</title>
    {% block stylesheets %}
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
              integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl"
              crossorigin="anonymous">
    {% endblock %}

</head>

<body>
<header>
    <nav class="navbar navbar-expand-lg" style="background-color: #297323;">
        <div class="collapse navbar-collapse" id="navbarTogglerDemo01" style="padding-left: 1%">
            <a class="navbar-brand" href="{{ path("home") }}" style="color: #FFFFFF;">Avanza</a>
            <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown"
                       aria-haspopup="true" aria-expanded="false" style="color: #FFFFFF;">
                        Article
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                        <a class="dropdown-item" href="{{ path('new_announcement') }}">Création</a>
                        <a class="dropdown-item" href="{{ path('show_list_announcement') }}">Consultation</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{{ path("app_register") }}" style="color: #FFFFFF;">Inscription</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{{ path("app_login") }}" style="color: #FFFFFF;">Connexion</a>
                </li>
            </ul>
        </div>
    </nav>
</header>
{% block body %}{% endblock %}
</body>
{% block javascripts %}
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js"
            integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi"
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js"
            integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG"
            crossorigin="anonymous"></script>
    <script
            src="https://code.jquery.com/jquery-3.6.0.min.js"
            integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
            crossorigin="anonymous"></script>
    <script type="text/javascript">
        $(function(){
            $("#navbarDropdownMenuLink").click(function(){
                $(".dropdown-menu").toggle();
                });
        });
    </script>
{% endblock %}
</html>

问候。

【问题讨论】：

嗨。可以添加 CSS 文件吗？
是的，但是引导程序不再起作用了。
我的意思是：）我们可能会看到问题，这可能是因为 CSS 的级联。

标签： php html css symfony bootstrap-4

【解决方案1】：

为解决您的问题，请检查您是否在引导链接下方附加了自定义 CSS 样式表。如果您的包含 customm css 样式表的标签位于引导样式表链接或引导的 CDN 链接之上，它有时会覆盖属性。希望这可以帮助。谢谢

【讨论】：