当我将引导程序添加到我的项目时， <li> 标记颜色混乱并更改为另一种颜色

Question

当我将引导程序添加到我的项目时，-li- 标记颜色混乱并更改为另一种颜色。 我如何通过向我的项目添加引导程序来控制颜色，当我悬停时也可以控制颜色？

<nav>
        <ul class="nav-menu">
            <li><a href="#section-1"><span>معرفی</span></a></li>
            <li><a href="#section-2"><span>رویدادها</span></a></li>
            <li><a href="#section-3"><span>فعالیت های هنری</span></a></li>
            <li><a href="#section-4"><span> تولیدات</span></a></li>
            <li><a href="#section-5"><span>فیلم </span></a></li>
            <li><a href="#section-6"><span>نمایش </span></a></li>
            <li><a href="#section-7"><span>بازیگری</span></a></li>
            <li><a href="#section-8"><span>نوشتار</span></a></li>
        </ul>

    </nav>


css:
nav>ul>li{
            /* width: 8%; */
            height: 100%;
            float: right;
            margin-left: 1%;
            text-align: center;
            line-height: 100px;
            font-family: sans-serif;
            font-size: 23px;
            color:white;**(doesn't work by adding bootstrap)**
           


        }
nav>ul>li:hover{
            background-color: rgb(214, 214, 214);
            color: black;**(doesn't work by adding bootstrap)**
        }

Answer 1

如果您可以发布您的 css 和 html 的 sn-p 将会很有帮助，但如果我不得不猜测：

1-您可能没有定位正确或更具体的元素-要解决此问题，请确保在 html 中为要定位的元素提供类名并在 css 中使用该类名（不要使用通用的 li 名称，因为引导样式会被优先考虑）。

2- 如果您使用框架或库，如 angular、react、gatsby .. 确保在在导入引导程序之后导入你的 CSS，它应该看起来像这样：

import './bootstrap.min.css'
import './layout.css'

如果您仍然无法定位您的元素，请与我们分享更多详细信息。