文章/答案/技术大牛

发布

社区首页 >问答首页 >用引导带5改变导航文字颜色的新方法是什么？

问用引导带5改变导航文字颜色的新方法是什么？
EN

Stack Overflow用户

提问于 2021-07-24 15:27:47

回答 1查看 109关注 0票数 0

我正在尝试使用Bootstrap 5，这是我的问题。我用引导带4直接在css中改变了nav li a元素的颜色，但是现在，用B5这种方式是行不通的。你们知道我该怎么改吗？

下面是一个例子。

.navbar-brand {
    color: #3DB9C3 !important;
}

.banniere nav li a { 
     color: #3DB9C3 !important; 
} 

.banniere nav li a:hover {
    color: #0D4B50 !important;
}

/*Screen < to 1250px*/
@media (max-width: 1250px) { 
    .nav-item:hover {
        background-color: #3DB9C3;
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

</head>
<body>
    <nav class="navbar navbar-expand-lg banniere border-bottom">
        <div class="container">
         <a class="navbar-brand">Name Test</a>          
                    <button class="navbar-toggler float-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation" style="outline-color: #3DB9C3;">
                          <span style="color: #3DB9C3"><i class="fas fa-bars"></i></span>
                    </button>
                    <div class="collapse navbar-collapse text-center" id="navbarResponsive">
                        <ul class="navbar-nav ms-auto">
                            <li class="nav-item active me-3">
                                <a class="nav-link" href="#">Test1
                                    <span class="sr-only">(current)</span>
                                </a>
                            </li>
                            <li class="nav-item me-3">
                                <a class="nav-link" href="#">Test2</a>
                            </li>
                            <li class="nav-item me-3">
                                <a class="nav-link" href="#">Test3</a>
                            </li>
                            <li class="nav-item me-3">
                                <a class="nav-link" href="#">Test4</a>
                            </li>
                        </ul>
                    </div>
                </div>
        </div>
    </nav>
</body>
</html>

诚恳地

twitter-bootstrap

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-07-25 07:32:44

只需像这样使用!important;

nav li a {
    color:#3DB9C3 !important;
}

做这件事有很多种方法。

1.如果您在样式表中指定CSS，可以在引导5之后加载它，这样您就可以不用!important;使用样式了。

2.您可以再添加一个说明符，如

.my-navbar nav li a {
    color:#3DB9C3 !important;
}

my-navbar类可以添加到父级 div中。

我告诉过你要给家长上课，但是当你给导航上课时，你的选择器应该是这样的。

nav.banniere li a { 
     color: #3DB9C3 !important; 
}

.navbar-brand {
    color: #3DB9C3 !important;
}
nav.banniere li a { 
     color: red ; 
} 

 nav.banniere li a:hover {
    color: green ;
}

/*Screen < to 1250px*/
@media (max-width: 1250px) { 
    .nav-item:hover {
        background-color: #3DB9C3;
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

</head>
<body>
    <nav class="navbar navbar-expand-lg banniere border-bottom">
        <div class="container">
         <a class="navbar-brand">Name Test</a>          
                    <button class="navbar-toggler float-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation" style="outline-color: #3DB9C3;">
                          <span style="color: #3DB9C3"><i class="fas fa-bars"></i></span>
                    </button>
                    <div class="collapse navbar-collapse text-center" id="navbarResponsive">
                        <ul class="navbar-nav ms-auto">
                            <li class="nav-item active me-3">
                                <a class="nav-link" href="#">Test1
                                    <span class="sr-only">(current)</span>
                                </a>
                            </li>
                            <li class="nav-item me-3">
                                <a class="nav-link" href="#">Test2</a>
                            </li>
                            <li class="nav-item me-3">
                                <a class="nav-link" href="#">Test3</a>
                            </li>
                            <li class="nav-item me-3">
                                <a class="nav-link" href="#">Test4</a>
                            </li>
                        </ul>
                    </div>
                </div>
        </div>
    </nav>
</body>
</html>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68511402

复制

相似问题

问用引导带5改变导航文字颜色的新方法是什么？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用引导带5改变导航文字颜色的新方法是什么？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用引导带5改变导航文字颜色的新方法是什么？
EN