我正在使用flask和Bootstrap。我正在尝试将自己的自定义CSS与一些Bootstrap类结合使用,尽管我可以将Bootstrap类应用于元素,但是当我尝试应用自己的自定义CSS时,它并不总是有效。例如,我将Bootstrap的text-center
应用于div,它可以工作。然后,我尝试应用一些自定义CSS,或者什么也没有发生,或者仅应用了我的CSS的一部分。例如,color: red
有效,但是font-size: 100px
什么都不做。
这真让我发疯,我已经尝试了一切。我的CSS在Bootstrap CDN之后加载,并且我在flask中使用url_for
访问CSS文件。我也尝试过使用!important
,但这无济于事。我不知道还能尝试什么。
在我的基本模板中导入CSS内容:
<head>
{% block head %}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="{{ url_for('static',filename='style.css') }}"/>
{% endblock %}
</head>
在下一个代码段中,Bootstrap类均起作用。但是,当我尝试使用red
类测试某些自定义CSS时,事情开始出错。我的自定义CSS的color: red
属性有效,但字体大小更改无效。我也无法对图像进行任何自定义。
{% extends "base.html" %}
{% block content %}
<div class="header">
<header class="text-center">
<div>
<img src="{{ logo }}" class="img-fluid">
</div>
<div>
<p class="red">Text here.</p>
<p>More text.</p>
</div>
<div class="buttons">
<a href="{{url_for('about')}}" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>
</div>
</header>
</div>
{% endblock %}
一些自定义CSS
.red {
color: red;
font-size: 100px;
}