Проблема с изменением цвета моего выпадающего меню bootstrap - PullRequest
Новая
       8

Проблема с изменением цвета моего выпадающего меню bootstrap

0 голосов
/ 11 марта 2020

Я начинаю разработку веб-приложений, поэтому Bootstrap, MVC, et c. это совершенно новый мир для меня. Я использую модель по умолчанию VS2019 для приложений ASP. NET MVC C#. Я завершаю с некоторыми командами начальной загрузки в файле Site. css, потому что я хочу использовать некоторые специфические цвета. Панель навигации принимает хорошие цвета, но когда я добавляю выпадающее меню, я вижу различные цвета, примененные после щелчка. Я не нахожу причину и, честно говоря, я заблудился в этом bootstrap мире !. Я буду признателен за вашу помощь! Заранее спасибо :)

Здесь мой файл .cs html: 

<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Application de Réservation PFL</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div class="navbar navbar-inverse navbar-inra navbar-fixed-top">
        <div class="container-fluid">  
            <div class="navbar-header">
                <a class="navbar-brand" href="#" style="padding: 10px;margin:auto">
                    <img src="~/Content/Images/Logo-INRAE_Transparent-[Blanc].png" width="90" height="25" dir="auto">
                </a>
                <img src="~/Content/Images/LogoSTLO-sans-fond.png" width="120" height="45" dir="auto">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span><!--Petit icon à droite pour montrer le ménu navbar lors de navigation sur portable-->
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Site de réservation et gestion de la PFL", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })

            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Réservation Projet", "Index", "Home")</li>
                    <li>@Html.ActionLink("Calendrier", "About", "Home")</li>
                    <!--<li>@Html.ActionLink("Maintenance", "Contact", "Home")</li>-->
                    <li class="dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <!--voir plus loin si les parametres "aria" sont utiles-->
                            Maintenance
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuMaintenance">
                            <a class="dropdown-item" href="#">Saisir une nouvelle intervention</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">Mise à jour intervention</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">Liste des interventions</a>
                        </div>
                    </li>
                    <li>@Html.ActionLink("Equipe", "Index", "Home")</li>
                    <!--<li>@Html.ActionLink("Sur la PFL", "Index", "Home")</li>-->
                    <li class="dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <!--voir plus loin si les parametres "aria" sont utiles-->
                            Sur la PFL
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuMaintenance">
                            <a class="dropdown-item" href="#">Plan PFL & Equipements</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">SMQ plateforme</a>
                        </div>
                    </li>
                </ul>
                </div>
            </div>
        </div>
        <div class="container body-content">
            @RenderBody()
            <hr />
            <footer>
                <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
            </footer>
        </div>

        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/bootstrap")
        @RenderSection("scripts", required: false)
    </body>
    </html>

и мой сайт. css файл: 

    padding-top: 50px;
    padding-bottom: 20px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}
/* Bootstrap crée sur le site https://work.smarchal.com/twbscolor/css/e74c3cc0392becf0f1ffbbbc0 
    pour le faire correspondre aux couleurs INRAE
*/
.navbar-inra {
    background-color: #00a3a6;
    border-color: transparent;
}

.navbar-inra .navbar-brand {
    color: #ffffff;
}

.navbar-inra .navbar-brand:hover,
.navbar-inra .navbar-brand:focus {
    color: #e1cece;
}

.navbar-inra .navbar-text {
    color: #ffffff;
}

.navbar-inra .navbar-nav > li > a {
    color: #ffffff;
}

.navbar-inra .navbar-nav > li > a:hover,
.navbar-inra .navbar-nav > li > a:focus {
    color: #e1cece;
}

.navbar-inra .navbar-nav > li > .dropdown-menu {
    background-color: #00a3a6;
}

.navbar-inra .navbar-nav > li > .dropdown-menu > li > a {
    color: #ffffff;
}

.navbar-inra .navbar-nav > li > .dropdown-menu > li > a:hover,
.navbar-inra .navbar-nav > li > .dropdown-menu > li > a:focus {
    color: #e1cece;
    background-color: #000000;
}

.navbar-inra .navbar-nav > li > .dropdown-menu > li.divider {
    background-color: #000000;
}

.navbar-inra .navbar-nav .open .dropdown-menu > .active > a,
.navbar-inra .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-inra .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #e1cece;
    background-color: #000000;
}

.navbar-inra .navbar-nav > .active > a,
.navbar-inra .navbar-nav > .active > a:hover,
.navbar-inra .navbar-nav > .active > a:focus {
    color: #e1cece;
    background-color: #000000;
}

.navbar-inra .navbar-nav > .open > a,
.navbar-inra .navbar-nav > .open > a:hover,
.navbar-inra .navbar-nav > .open > a:focus {
    color: #e1cece;
    background-color: #000000;
}

.navbar-inra .navbar-toggle {
    border-color: #000000;
}

.navbar-inra .navbar-toggle:hover,
.navbar-inra .navbar-toggle:focus {
    background-color: #000000;
}

.navbar-inra .navbar-toggle .icon-bar {
    background-color: #ffffff;
}

.navbar-inra .navbar-collapse,
.navbar-inra .navbar-form {
    border-color: #ffffff;
}

.navbar-inra .navbar-link {
    color: #ffffff;
}

.navbar-inra .navbar-link:hover {
    color: #e1cece;
}

@media (max-width: 767px) {
    .navbar-inra .navbar-nav .open .dropdown-menu > li > a {
        color: #ffffff;
    }

    .navbar-inra .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-inra .navbar-nav .open .dropdown-menu > li > a:focus {
        color: #e1cece;
    }

    .navbar-inra .navbar-nav .open .dropdown-menu > .active > a,
    .navbar-inra .navbar-nav .open .dropdown-menu > .active > a:hover,
    .navbar-inra .navbar-nav .open .dropdown-menu > .active > a:focus {
        color: #e1cece;
        background-color: #000000;
    }
}
...