HTML BootStrap 导航栏未按预期显示

Question

我最近在反应应用程序中添加了一个引导导航栏，但是当我切换部分时它没有正确显示，例如。从主页到服务页面。我希望在切换页面时显示一个深色导航栏

这是我的导航栏 HTML 代码

<nav className="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
    <div className="container">
        <a className="navbar-brand js-scroll-trigger" href="#page-top"><img src="assests/img/navbar-logo.svg" alt="" /></a>
        <button className="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> 
            Menu <i className="fas fa-bars ml-1"></i>
        </button>
        <div className="collapse navbar-collapse" id="navbarResponsive">
            <ul className="navbar-nav text-uppercase ml-auto">
                <li className="nav-item"><a className="nav-link js-scroll-trigger" href="#services">Services</a></li>
                <li className="nav-item"><a className="nav-link js-scroll-trigger" href="#portfolio">Faciltities</a></li>
                <li className="nav-item"><a className="nav-link js-scroll-trigger" href="#about">About</a></li>
                <li className="nav-item"><a className="nav-link js-scroll-trigger" href="#team">Owners</a></li>
                <li className="nav-item"><a className="nav-link js-scroll-trigger" href="#contact">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>

Answer 1

尝试创建样式表并将其链接到您的标题中。

这是要包含在头部的代码。这将链接到名为“styles.css”的样式表中：

<link rel="stylesheet" href="styles.css"/>

在这个样式表中试试这个：

#darkNavbar{ 
    color : black 
} 

这将使带有id = "darkNavbar" 的属性变为黑色。

我已更新您的代码以删除类 navbar-dark 并为导航栏提供 darkNavbar id。

<nav id="darkNavbar" className="navbar navbar-expand-lg fixed-top" id="mainNav">
    <div className="container">
        <a className="navbar-brand js-scroll-trigger" href="#page-top"><img src="assests/img/navbar-logo.svg" alt="" /></a>
        <button className="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> 
            Menu <i className="fas fa-bars ml-1"></i>
        </button>
        <div className="collapse navbar-collapse" id="navbarResponsive">
            <ul className="navbar-nav text-uppercase ml-auto">
                <li className="nav-item"><a className="nav-link js-scroll-trigger" href="#services">Services</a></li>
                <li className="nav-item"><a className="nav-link js-scroll-trigger" href="#portfolio">Faciltities</a></li>
                <li className="nav-item"><a className="nav-link js-scroll-trigger" href="#about">About</a></li>
                <li className="nav-item"><a className="nav-link js-scroll-trigger" href="#team">Owners</a></li>
                <li className="nav-item"><a className="nav-link js-scroll-trigger" href="#contact">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>

试一试。让我知道是否有帮助。

Answer 2

只需在样式标签中触发导航栏颜色为黑色...

<style>
.navbar-dark{
   color: black;
}
</style>