webentwicklung-frage-antwort-db.com.de

Ändern Sie die Textfarbe der Navigationsleiste Bootstrap

Ich habe derzeit dieses Stück HTML, das den relevanten Teil meiner Navigationsleiste darstellt:

<nav class="navbar navbar-inverse" role="navigation">
    <div class="container">
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#"><span class="glyphicon glyphicon-user"></span> About</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-earphone"></span> Contact</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-briefcase"></span> Portfolio</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-list-alt"></span> R&eacute;sum&eacute;</a></li>
        </ul>
    </div>
</nav>

Und ich habe dieses CSS, mit dem ich die Textfarbe der Navigationsleiste ändern wollte:

.nav.navbar-nav.navbar-right {
    color: blue;
}

Das einzige Problem ist, dass die Textfarbe unverändert bleibt. Ich habe auch gesehen, dass eine sehr ähnliche Frage ungelöst blieb. Ich wette, wer dieses Problem lösen kann, kann auch das andere lösen.

14
Quinn McHugh

Machen Sie es wie folgt:

.nav.navbar-nav.navbar-right li a {
    color: blue;
}

Die oben genannten Links zielen auf die spezifischen Links ab, die Sie wünschen, statt die gesamte Liste blau zu gestalten, was Sie ursprünglich getan haben. Hier ist ein JsFiddle .

Die andere Möglichkeit wäre, eine andere Klasse zu erstellen und wie folgt zu implementieren:

HTML

<li><a href="#" class="color-me"><span class="glyphicon glyphicon-list-alt"></span> R&eacute;sum&eacute;</a></li>

CSS

.color-me{
    color:blue;
}

Auch hier gezeigt JsFiddle

29
BuddhistBeast

Ab Bootstrap 4 müssen Sie einfach navbar-dark im nav-Element setzen, um Text und Links zu einem hellen Thema zu setzen.

<nav class="navbar navbar-dark">
5
Leon

Der Thread, mit dem Sie verlinkt haben, beantwortet die Frage für Sie. Sie müssen die a-Elemente selbst anvisieren. Z.B. 

.nav.navbar-nav.navbar-right a {
    color: blue;
}

Wenn das nicht funktioniert, muss es nur genauer sein. Z.B.

.nav.navbar-nav.navbar-right li a {
    color: blue;
}
2
ralph.m

dieser Code wird funktionieren,

.navbar .navbar-nav > li .navbar-item ,
.navbar .navbar-brand{
                       color: red;
                      }

fügen Sie Ihre CSS ein und führen Sie .__ aus, wenn sich darunter ein Element befindet 

  • Definiere sie als .navbar-item-Klasse

    z.B .

    <li>@Html.ActionLink("Login", "Login", "Home", new { area = "" },
     new { @class = "navbar-item" })</li>
    

    ODER 

    <li> <button class="navbar-item">hi</button></li>
    
  • 1
    kushal

    Versuche dies 

    .nav.navbar-nav.navbar-right li a span{
        color: blue;
    }
    

    Wenn es nicht funktioniert, probieren Sie es aus

    .nav.navbar-nav.navbar-right li a {
        color: blue;
    }
    
    1
    Aditya Ponkshe

    Zum Ändern der Textfarbe in der Navigationsleiste können Sie Inline-CSS als verwenden.

    <a style="color: #3c6afc" href="#">
    
    1
    ABDUL KHALIQ

    In der Tat können wir einfach die Standard bootstrap Textfarben verwenden, anstatt die CSS-Formate zu hacken .

    Standardfarbbeispiele: text-primary, text-secondary, text-success, text-danger, text-warning, text-info

    Im folgenden Beispiel für einen Navbar-Code würde der Text Homepage die Farbe Orange haben (text-warning).

    <a class="navbar-brand text-warning" href="/" > Homepage </a>
    

    Im Navbar-Menüpunkt Beispiel unten wird der Text Menu Item würde in der blauen Farbe sein (text-primary).

    <a class="dropdown-item text-primary" href="/my-link">Menu Item</a>
    
    0
    Amos
    .nav-link {
    color: blue !important;
    }
    

    Hat für mich gearbeitet. Bootstrap v4.3.1

    0
    wchoward

    Versuchen Sie dies in Ihrer CSS:

    #ntext{
     color: #000000;
      }
    

    Dann das Folgende in allen Code-Codes der Navigationsleiste:

    <li><a href="#" id="ntext"><span class="glyphicon glyphicon-user"></span> About</a></li>
    
    0
    Shakela Tamuti

    Wenn Sie die Hintergrundfarbe der Navigationsleiste ändern müssen, haben Sie folgende Möglichkeiten:

    <nav class="navbar navbar-expand-lg navbar-light" style="background-color=#e3f2fd">
    

    Und den Text ändern:

    <a class="nav-link" href="#" style="color:#ccc">
    
    0
    Martin Minnie