Question

我的bootstrap导航栏出了问题。它不会按照我想要的方式着色，我尝试使用!import添加代码，但我无法使其工作

<nav class="navbar navbar-expand-md navbar-ligt fixed-top sticky-navigation " style="background: green !important;">
        <button class="navbar-toggler navbar-toggler-right" type="button" style="background: green !important;" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
            <span class="ion-grid icon-sm"></span>
        </button>
        <a class="navbar-brand hero-heading" href="#">Jeroen Hooge</a>
        <div class="collapse navbar-collapse" id="navbarCollapse">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item mr-3">
                    <a class="nav-link page-scroll" href="#main">Product <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item mr-3">
                    <a class="nav-link page-scroll" href="#features">Werk</a>
                </li>
                <li class="nav-item mr-3">
                    <a class="nav-link page-scroll" href="#pricing">Prijs</a>
                </li>
                <li class="nav-item mr-3">
                    <a class="nav-link page-scroll" href="#team">Team</a>
                </li>
                <li class="nav-item mr-3">
                    <a class="nav-link page-scroll" href="#blog">Blog</a>
                </li>
                <li class="nav-item mr-3">
                    <a class="nav-link page-scroll" href="#contact">Contact</a>
                </li>
            </ul>
        </div>
    </nav>

这是我的代码看起来的样子，但它不会在第一个毫秒或其他东西上为背景绿色着色。

If I inspect the website you can see on the left that it somehow makes it a different color and I don't know why css中没有任何东西可以使它成为那种颜色。如果我在网站的顶部，它会使它透明，如果我滚动这种颜色

Answer 1

头标记

<link rel="stylesheet" href="/css/bootstrap.css">
    <link rel="stylesheet" href="/css/style.css">

在Body Tag结束之前

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

只需检查是否已正确添加（或所有文件）。

Answer 2

您可能需要检查一下您是否正在尝试更改已经拥有的重要信息

你已经使用了bg-light类，也可以使用导航颜色。删除它。

<nav class="navbar navbar-expand-md fixed-top sticky-navigation " style="background: green !important;">
        <button class="navbar-toggler navbar-toggler-right" type="button" style="background: green !important;" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
            <span class="ion-grid icon-sm"></span>
        </button>
        <a class="navbar-brand hero-heading" href="#">Jeroen Hooge</a>
        <div class="collapse navbar-collapse" id="navbarCollapse">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item mr-3">
                    <a class="nav-link page-scroll" href="#main">Product <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item mr-3">
                    <a class="nav-link page-scroll" href="#features">Werk</a>
                </li>
                <li class="nav-item mr-3">
                    <a class="nav-link page-scroll" href="#pricing">Prijs</a>
                </li>
                <li class="nav-item mr-3">
                    <a class="nav-link page-scroll" href="#team">Team</a>
                </li>
                <li class="nav-item mr-3">
                    <a class="nav-link page-scroll" href="#blog">Blog</a>
                </li>
                <li class="nav-item mr-3">
                    <a class="nav-link page-scroll" href="#contact">Contact</a>
                </li>
            </ul>
        </div>
    </nav>

Bootstrap：导航栏不会变色

2 个答案: