Question

最近我决定尝试新的bootstrap版本（4）。我用文件做了一切（我的html如下）

<!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>

但我的导航栏（navbar-inverse）没有颜色。你见过类似Bootstrap 4的东西吗？

Answer 1

在Bootstrap 4中，您想要更改nav标签的背景类（.bg-light或.bg-dark）。

<nav class="navbar navbar-expand-md bg-dark">

接下来，您可以使用navbar-dark更改文字的颜色以适应较暗的对比度。

Answer 2

Navbar-inverse默认具有属性。它给出了导航栏的黑色。只需将.navbar-defaultclass更改为.navbar-inverse

即可

<nav class="navbar navbar-inverse">

在bootstrap 4中，navbar-inverse由navbar-dark替换。它的工作方式是，指定亮或暗（通过.navbar-light或.navbar-dark）

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

Answer 3

使用此：

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

Answer 4

升级到bootstrap4时遇到同样的问题。您需要将navbar-dark添加到<nav>标记，表明这是一个黑暗的导航栏，因此它应该使用白色文本。

＆＃13;

<!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>

＆＃13;

截图：

Answer 5

尽管@ Asia-x3的答案有很大帮助，但用钢不会改变前景色。通过对navbar-inverse标签<nav>属性进行以下修改，并在class之后添加navbar-dark，可以获得与先前版本bg-dark相同的布局。

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

Answer 6

Bootstrap-4 删除了逆类。相反，您可以使用：

<nav class="navbar navbar-expand-lg navbar-light bg-light">

有关 Bootstrap 4 的更多信息，请访问： https://getbootstrap.com/docs/4.6/migration/

要将您的 V3 代码转换为 V4，请尝试： http://upgrade-bootstrap.bootply.com/

Bootstrap 4 navbar-inverse没有颜色

6 个答案: