Bootstrap 导航栏在小屏幕上变得透明

Question

我是 bootstrap 的新手，正在尝试创建一个带有响应式导航栏的网页。一切都按照我的意愿进行，只有当屏幕变得足够小以使其成为可折叠列表时，导航栏才会变得透明。我已经搜索了 Chrome 检查器无济于事，并尝试了我能想到的一切。有人有想法吗？

Answer 1

将此行添加到您的 css:

.navbar{
  z-index: 2;
}

这个问题是因为您的行内容是在您的导航之后创建的（因此在它的前面），但是您在点击时扩展了导航。为防止这种情况，您只需为导航提供比内容更大的 z-index（默认情况下为 1）。

Answer 2

我遇到了同样的问题。只需更改您的 scripts.js 文件，或者如果您还没有此文件，则将这行代码添加到您的 scripts.js。将颜色相应地更改为您喜欢的颜色。

// Collapse Navbar
var navbarCollapse = function () {
    if ($("#mainNav").offset().top > 100) {
        $("#mainNav").addClass("navbar-shrink");
        //scroll more than 100 change background color
        //add the same for the else statement below instead of transparent if you dont 
        //want transparent color
        $("#mainNav").css("background-color", "#212529");
    } else {
        $("#mainNav").removeClass("navbar-shrink");
        //scroll less than 100 keep background color transparent
        $("#mainNav").css("background-color", "transparent");

    }
};

Bootstrap 导航栏在小屏幕上变得透明

Bootstrap Navbar becomes transparent on small screen

navbar

twitter-bootstrap