So ändern Sie die Farbe der navbar-inverse (Bootstrap)

Ich habe eine einfache Frage gibt mir eine harte Zeit. Ich bin erstellen einer Navigationsleiste mit Bootstrap, und ich versuche, seine Farbe zu ändern, aber ich kann nicht.

jsp

<nav class="navbar navbar-inverse navbar-static-top" role="navigation">

css

navbar-inverse {
background-color:whatever;
     }

Mache ich etwas falsch in css?

  • Wenn Ihr Beispiel ist genau dann Sie Sie meed, um ein . (Punkt) geben Sie eine Klasse. .navbar-inverse und stellen Sie sicher, dass Ihr stylesheet erst nach bootstraps.
InformationsquelleAutor Mike | 2017-02-16
  1. 8

    Hier ist, was der Standard für navbar-inverse ist:

    .navbar-inverse {
     background-color: #222;
     border-color: #080808;
}

    Das ist natürlich dunkel, nicht die Farbe, die Sie wollen.

    Also statt mit einer !important auf Ihre benutzerdefinierte Regel Sie gehen KONNTE, suchen Sie für diese Regel in der bootstrap-css.

    Abgesehen, dass, legen Sie eine !important auf Ihre benutzerdefinierte Regel und sollte es überschreiben.

    • Vielen Dank, es hat funktioniert.
    InformationsquelleAutor scoopzilla
  2. 2

    navbar-inverse ist eine Klasse also, Sie können es nennen, durch das hinzufügen von ' . ' vor dem Namen der Klasse

    .navnavbar-inverse {
    background-color:whatever !important;
}

    einen !wichtig auf Ihre benutzerdefinierte Regel überschreiben andere Regel von Ihrem custom CSS, und jetzt sollte alles funktionieren.

    • Genial, es hat funktioniert.
    InformationsquelleAutor Mohammed Elzanaty
  3. 0

    Ich immer, vermeiden die Verwendung von !important wie es kann zu Problemen im späteren Teil des Projekts. Zuweisen eines id zu dem element und Stil. Also, ich in der Regel gehen mit den unten genannten Weg---

    CSS:

    #nav_bar {
background-color: red;
border-color: red;
}

    HTML:

    <html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
           <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
           
           </head>
           <body>
           <nav id="nav_bar" class="navbar navbar-inverse navbar-static-top" role="navigation"></nav>

           </body>
           </html>

    Hoffe, das hilft!

    InformationsquelleAutor neophyte
Schreibe einen Kommentar