заполнение в начальной загрузке с использованием контейнерной жидкости

#html #css #bootstrap-4

Вопрос:

может ли кто-нибудь помочь мне найти ошибку в жидкости для загрузочного контейнера, которую мне просто нужно добавить, но она не работает. код работает только тогда, когда мы используем

 .container-fluid {
    padding: 3% 15% !important;
}

если мы удалим !важно, это не сработает, знаете ли вы причину

я поделюсь кодом ниже

 <body>
        <section id="title">
            <div class="container-fluid">
                <!-- Nav Bar -->
                <nav class="navbar navbar-expand-lg navbar-dark">
                    <a class="navbar-brand" href="">Tindog</a>
                    <button
                        class="navbar-toggler"
                        type="button"
                        data-toggle="collapse"
                        data-target="#navbarSupportedContent"
                        aria-controls="navbarSupportedContent"
                        aria-expanded="false"
                        aria-label="Toggle navigation"
                    >
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav ms-auto">
                            <li class="nav-item">
                                <a class="nav-link" href="">Contact</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="">Pricing</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="">Download</a>
                            </li>
                        </ul>
                    </div>
                </nav>

                <!-- Title -->

                <div class="row">
                    <div class="col-lg-6">
                        <h1>Meet new and interesting dogs nearby.</h1>

                        <button type="button">Download</button>
                        <button type="button">Download</button>
                    </div>
                    <div class="col-lg-6">
                        <img src="images/iphone6.png" alt="iphone-mockup" />
                    </div>
                </div>
            </div>
        </section>

код css является

 #title {
    background-color: #ff4c78;
}
.container-fluid {
    padding: 3% 15%;
}

h1 {
    font-family: "Montserrat", sans-serif;
    font-size: 3rem;
    line-height: 1.5rem;
}

1. Где вы загружаете свой CSS по отношению к CSS начальной загрузки? Вы должны будете загрузить его позже. Стили для container -это отступ слева и справа на 15 пикселей, без !важно, поэтому ваш CSS должен переопределять начальную загрузку, если ваш CSS будет последним.

2. Это вопрос специфики. К элементу будет применено только самое конкретное определение CSS. Ключевое !important слово применяет определенный стиль и переопределяет все остальные определения. Вы можете прочитать о специфике CSS здесь, например: developer.mozilla.org/en-US/docs/Web/CSS/Specificity

3. Спасибо 🙂 это действительно помогло

Ответ №1:

Обычно это происходит, если вы разместили ссылку на свою собственную таблицу стилей или определили пользовательские стили CSS внутри <style> тега, прежде чем связать таблицу стилей начальной загрузки. Браузер следует подходу «сверху вниз» при отображении страниц, и поэтому любые стили CSS, которые имеют одно и то же имя (в вашем случае: .container-fluid) со стилем другой таблицы стилей, затем ваши пользовательские стили CSS будут перезаписаны стилями в последней таблице стилей.

Решение: Поместите ссылку на свою пользовательскую таблицу стилей после связывания всех других таблиц стилей, таких как Bootstrap, Font Awesome и т. Д.

Если бы вы могли включить код, который вы вставили между <head> тегами, я мог бы это подтвердить.

P.S. Я вижу, вы занимаетесь проектом TinDog, так что, вероятно, следуете курсу Анджелы Юй. Вот ссылка на мой код на GitHub для справки.