css - 如何在一个 css 文件中使用三种不同的 Bootstrap 菜单颜色？-6ren

css - 如何在一个 css 文件中使用三种不同的 Bootstrap 菜单颜色？

转载作者：太空宇宙更新时间：2023-11-04 08:35:25

我有两个页面的 Bootstrap 导航菜单颜色与其余页面不同(总共三个不同的设置)。
导航菜单是一个 html 文件(链接到每个页面)。
我想将所有代码放在一个 css 文件中。请问我该怎么做？
谢谢。这是代码示例:

    .navbar-default {
    background-color: #65625B;
    background-color: transparent;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4c000000,endColorstr=#4c000000);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4c000000,endColorstr=#4c000000)";
    zoom: 1; 
    background-color: rgba(255, 255, 255, 0.0) !important;
    border-color: transparent;
    border-color: #65625B;
    border-color: rgba(255, 255, 255, 0.0) !important;
    font-size: 12px;
}

@media(max-width:767px){
.navbar-default {
    background-color: #65625B !important;
    border-color: #65625B !important;
}
}

/* 3-bar button color */
.navbar-toggle {
    background-color: #65625B !important;
}

/* 3-bar button hover */
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
    background-color: #83817b !important;
}

/* 3-bar button border */
.navbar-default .navbar-toggle {
    border-color: #65625B !important;
}

最佳答案

假设每个页面都有自己的主体，为需要不同颜色的页面分配一个唯一的 ID。

<body id="my-blue-navigation">

然后在您的 CSS 中引用正确的类。

#my-blue-navigation .navbar-default {
  background-color: blue;
}

nav {
width: 100%;
height: 100px;
}

.navbar-default {
background-color: red;
}

#my-blue-navigation .navbar-default {
background-color: blue;
}

<body id="my-blue-navigation">
<nav class="navbar-default">
</nav>
</body>

关于css - 如何在一个 css 文件中使用三种不同的 Bootstrap 菜单颜色？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44492738/

文章推荐： html - WordPress 图像不一致

文章推荐： Python优化形状重叠检测

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

css - 如何在一个 css 文件中使用三种不同的 Bootstrap 菜单颜色？