我有两个页面的 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/