2017-09-24 1 views
1

Kürzlich habe ich mich entschieden, eine neue Bootstrap-Version (4) auszuprobieren. Ich habe alles richtig gemacht mit Dateien (meine html unten)Bootstrap 4 navbar-inverse hat keine Farbe

<!DOCTYPE html> 
<html lang="pl"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
    <title>Bootstrap 4 website</title> 
    <link rel="stylesheet" href="css/bootstrap.min.css"> 
    <link rel="stylesheet" href="css/style.css"> 
</head> 
<body> 

    <nav class="navbar navbar-inverse"> 
     <a href="#">Link1</a> 
    </nav> 

    <!-- JS scripts here --> 
    <script src="js/jquery-3.2.1.min.js"></script> 
    <script src="js/popper.min.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
    <script src="js/script.js"></script> 
</body> 
</html> 

aber meine Navbar (Navbar-inverse) hat keine Farbe. Hast du jemals etwas ähnliches mit Bootstrap 4 gesehen?

+0

Ich bin das Problem scheint zu müssen. hast du irgendwelche Hinweise dazu? –

Antwort

0

Navbar-inverse haben standardmäßig eine Eigenschaft. Es gibt eine schwarze Farbe der Navigationsleiste. ändern einfach den .navbar-defaultclass in .navbar-inversen

<nav class="navbar navbar-inverse"> 

In Bootstrap 4 navbar-Invers wird durch navbar-Dunkel ersetzen. Die Funktionsweise ist, geben Sie hell oder dunkel (via .navbar-Licht oder .navbar-dunkel)

<nav class="navbar navbar-expand-sm navbar-dark bg-primary"> 
+0

Sie meinen "Navbar-Inverse" anstelle von "Navbar Navbar-Inverse"? Das scheint nicht zu funktionieren. – svyatogor92

+0

Wenn Sie eine schwarze Navigationsleiste verwenden möchten, verwenden Sie class = "navbar-inverse", aber wenn Sie eine Farbe Ihrer Wahl möchten, verwenden Sie css. –

+0

Wie ich sage class = "navbar-inverse" funktioniert nicht. Ja, ich möchte schwarze Farbe, aber diese Klasse gibt mir nicht nur irgendeine Farbe, sondern entfernt auch das Padding von der Navbar. – svyatogor92

0

haben das gleiche Problem, wenn zu bootstrap4 aktualisieren. Sie müssen navbar-dark zum <nav> Tag hinzufügen, das anzeigt, dass dies eine dunkle Navbar ist, also sollte es einen weißen Text verwenden.

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
    
 
<head> 
 
    <!-- Required meta tags always come first --> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
 
    <meta http-equiv="x-ua-compatible" content="ie=edge"> 
 

 
    <!-- Bootstrap CSS --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> 
 
</head> 
 
    
 
    
 
<body> 
 
    <nav class="navbar navbar-inverse navbar-dark bg-primary navbar-expand-sm"> 
 
      
 
      <div class="collapse navbar-collapse" id="Navbar"> 
 
       <ul class="navbar-nav mr-auto"> 
 
        <li class="nav-item active"><a class="nav-link" href="#"> Home</a></li> 
 
       </ul> 
 
      </div> 
 
    </nav> 
 

 
    
 
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> 
 
</body> 
 
</html>

Screenshot:

enter image description here