CSS не загружается с bootstrap - PullRequest
Новая
       7

CSS не загружается с bootstrap

0 голосов
/ 18 апреля 2020

Html

    <!DOCTYPE html>
    <html>
    <head>
        {%if title%}
        <title>Forum- {{title}}</title>
        {%else%}
        <title>Forum</title>
        {%endif%}
        <head>
            <!-- Required meta tags -->
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

            <!-- 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="./Form.css">
            <title>Blog</title>
        </head>
        <body>

        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    </head>
    <body>

    <nav class = "navbar navbar-expand bg-dark">
            <a class = "nav-item nav-link colora"  href="#">Home</a>
            <a class ="nav-item nav-link"  href="#">Posts</a>
    </nav>
    <div class = "container">
        {% block content %}{% endblock %}
    </div>

CSS

.colora a,.colora a:visited {
    color: rgb(255, 255, 250);
    text-decoration: none;
}

Я пытаюсь сделать цвет внутри белым с файлом CSS, к сожалению, это не так Кажется, я не хочу ничего менять, хотя я указал его, который должен переопределить bootstrap. Спасибо, что нашли время взглянуть на эту проблему!

Ответы [ 3 ]

1 голос
/ 18 апреля 2020

Используйте! Важный атрибут для переопределения bootstrap. Также вы неправильно добавили тег привязки в css. Класс colora применяется к тегу anchor. Тем не менее, ваш CSS обозначает, что тег anchor находится внутри класса colora, которого нет. Снимите якорь с css, и он будет работать. Ниже приведен пример вашего рабочего кода. 

.colora,.colora:visited {
    color: #fff !important;
    text-decoration: none !important;
}
 <!DOCTYPE html>
    <html>
    <head> 
        <head>
            <!-- Required meta tags -->
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

            <!-- 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="./Form.css">
            <title>Blog</title>
             
        </head>
        <body>

        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    </head>
    <body>

    <nav class = "navbar navbar-expand bg-dark">
            <a class = "nav-item nav-link colora"  href="#">Home</a>
            <a class ="nav-item nav-link colora"  href="#">Posts</a>
    </nav>
    <div class = "container">
        container 
    </div>
0 голосов
/ 18 апреля 2020 


<!DOCTYPE html>
<html>

<head>

    <title>Forum- home</title>

    <!-- Required meta tags -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- 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="static/stylesheets/style.css">
    <title>Blog</title>
</head>

<body>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>


    <nav class="navbar navbar-expand bg-dark">
        <a class="nav-item nav-link colora" href="#">Home</a>
        <a class="nav-item nav-link" href="#">Posts</a>
    </nav>
    <div class="container">


        <h1>Blog 1</h1>
        <p>By Matthew Lee on April 20, 2018</p>
        <p>First Post</p>


    </div>
</body>

Получилось, проблема, по-видимому, была в том, что мне нужно было переименовать stati c, который я назвал template, в stati c. Также мне пришлось указать местоположение файла вместо использования метода url_for. Не знаю, почему это сработало, но это был бы окончательный код.

0 голосов
/ 18 апреля 2020

Ваш css ссылается на элемент a, который является дочерним элементом элемента с классом colora. Нет такого элемента.

Я думаю, что вы хотите 

a.colora,a.colora:visited {

, но я могу только догадываться. 

a.colora,a.colora:visited {
    color: rgb(255, 255, 250);
    text-decoration: none;
}
<!DOCTYPE html>
    <html>
    <head>
        {%if title%}
        <title>Forum- {{title}}</title>
        {%else%}
        <title>Forum</title>
        {%endif%}
        <head>
            <!-- Required meta tags -->
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

            <!-- 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="./Form.css">
            <title>Blog</title>
        </head>
        <body>

        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    </head>
    <body>

    <nav class = "navbar navbar-expand bg-dark">
            <a class = "nav-item nav-link colora"  href="#">Home</a>
            <a class ="nav-item nav-link"  href="#">Posts</a>
    </nav>
    <div class = "container">
        {% block content %}{% endblock %}
    </div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...