Я использую bootstrap для работы с моим сайтом.
Конечно, бывают случаи, когда bootstrap может быть недостаточно или недостаточно гибко.
В этих случаях мы хотим использовать пользовательские CSS.
Однако, когда я использую CSS, это не имеет никакого значения.
Например :
У меня есть изображение
{% extends "base.html" %}
.
.
.
<div class="container">
<div class="row">
<img src="https://cdn.dribbble.com/users/3858/screenshots/5909706/stackoverflow-design.png" id="foo">
</div>
</div>
.
.
.
И я хочу придать ему стиль, поэтому я загружаю свой main.css и ввожу
#foo{
height: 400px;
border-radius: 10px;
}
И все же мое изображение не изменяет высоту и не получает границы радиуса.
Однако, если я сделаю это и добавлю свой стиль в строке:
<div class="container">
<div class="row">
<img src="https://cdn.dribbble.com/users/3858/screenshots/5909706/stackoverflow-design.png" id="foo" style="height:400px; border-radius:10px;">
</div>
</div>
Это работает, и все хорошо в мире.
При небольшом исследовании кажется, что эта проблема обычно связана с
a) Недостаточно указать c и, таким образом, стиль bootstrap имеет приоритет.
Я не понимаю, как это могло быть, учитывая, что я дал уникальный идентификатор для моего тега img id="foo", сколько еще спецификаций c я могу получить?
или
б) неправильно загружает css
Вот так я загружаю css
BASE. HTML
...
<!-- Bootstrap CSS -->
<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" type="text/css" href="{{ url_for('static', filename='main.css') }}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
...
Я новичок в CSS, что мне не хватает?
ОБНОВЛЕНИЕ
Сегодня я провел безуспешно несколько часов, пытаясь решить эту проблему.
Вот то, что я пробовал:
Использование !important, чтобы увидеть, если это была проблема со спецификой селектора. Я добавил это, и это все еще не работало.
После этого я выполнил проверку элемента и увидел, что он распознает тег, а css правильно связывается, но все еще не работает, в меню стилей это только показывая:
конечно, нет никакого упоминания о моем кастомном css только то, что я считаю стилем bootstrap.
пользовательский css определенно загружается, как вы можете видеть здесь, мои данные сети в chrome проверяют отображение статуса 200 на главном. css файле.
Я провел безуспешно несколько часов.
Может кто-нибудь, пожалуйста, помогите !!!!!