HTML BootStrap导航栏未按预期显示

问题描述

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

这是我的导航栏的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>

解决方法

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

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

,

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

这是要包含在头部的代码。这将链接到名为“ 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>

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