如何更改Bootstrap下拉菜单的背景颜色?

envsm3lx  于 2023-06-20  发布在  Bootstrap
关注(0)|答案(8)|浏览(150)

目前我正在使用这个模板:http://getbootstrap.com/examples/navbar-fixed-top/
有没有办法给予下拉菜单中的背景(当导航栏折叠时弹出的那个)另一种颜色,而不是导航栏本身的颜色?
到目前为止我所尝试的是这样的,没有成功:

.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #555555;
    background-color: #e7e7e7;
}
r1zhe5dt

r1zhe5dt1#

用这个

.navbar-nav > li > .dropdown-menu { background-color: #FF0000; }
ezykj2lf

ezykj2lf2#

请记住,您使用CSS所做的一切都是调用HTML已经读取的内容。你需要得到一个告诉CSS你想要什么样的变化和从哪里。下面的代码应该可以改变下拉菜单的背景颜色和字体的颜色。

/* Dropdown menu background color*/

.navbar-nav > li > .dropdown-menu {     background-color: #e7e7e7;  }

/* Dropdown menu font color*/ 

 .navbar-nav > li > .dropdown-menu a{   color: #555555;  }
ws51t4hk

ws51t4hk3#

获取 Bootstrap 导航菜单下拉菜单的背景色

.navbar-nav > li > .dropdown-menu a:link,
.navbar-nav > li > .dropdown-menu a:hover { background-color: #FF0000;}
kknvjkwl

kknvjkwl4#

试试这个

.dropdown-menu > .active > a,.dropdown-menu > .active > a:hover.dropdown-menu > .active > a:focus {color: #555555!important; background-color: #e7e7e7!important;}
q0qdq0h2

q0qdq0h25#

ul.dropdown-menu {
    background-color: #000;
}
wkyowqbh

wkyowqbh6#

.nav .open>a {background: #yourcolor !important;}
0mkxixxg

0mkxixxg7#

当点击下拉菜单时,一个“打开”的类已经通过 Bootstrap 添加,所以你可以覆盖如下:

.navbar-default .navbar-nav > .open > a, 
.navbar-default .navbar-nav > .open > a:focus,
.navbar-default .navbar-nav > .open > a:hover {
    color: #555;
    background-color: #e7e7e7;
}
mbzjlibv

mbzjlibv8#

您可以使用合适的@media屏幕值
要更改父ul背景,请使用以下代码:

@media (max-width: 768px){
  .dropdown-menu{
    /*property: value;*/
  }
}

相关问题