我想添加一个自定义的CSS文件到我的网页。然而，当我这样做时，我之前添加的引导CSS被覆盖，我的页面看起来很丑。所以我的问题是如何添加一些自定义CSS属性到HTML标签，而不会失去我用bootstrap创建的设计。
N。B:我正在使用Symfony 5与twig模板和引导没有安装，我使用cdn。
下面是我的代码:showlist.html。从base.html.twig扩展的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。枝:
<!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>
致意。
欧美
要解决您的问题，请检查您是否在bootstrap链接下面附加了自定义CSS样式表。如果包含自定义css样式表的标签位于引导样式表链接或引导的CDN链接之上，它有时会覆盖属性。希望这对你有所帮助。由于