HTML – 如何更改bootstrap 4下拉颜色?
发布时间:2020-12-14 18:53:21 所属栏目:资源 来源:网络整理
导读:我试图改变bootstrap 4下拉导航的背景和字体颜色. 我试着用 .nav.nav-tabs li.dropdown.active.open a,.nav.nav-tabs li.dropdown.active.open ul.dropdown-menu a:hover,.nav.nav-tabs li.dropdown.open a,.nav.nav-tabs li.dropdown.open ul.dropdown-menu
我试图改变bootstrap 4下拉导航的背景和字体颜色.
我试着用 .nav.nav-tabs > li.dropdown.active.open > a,.nav.nav-tabs > li.dropdown.active.open > ul.dropdown-menu a:hover,.nav.nav-tabs > li.dropdown.open > a,.nav.nav-tabs > li.dropdown.open > ul.dropdown-menu a:hover { color: #fff; background-color: #b91773; border-color: #fff; } 但这对我来说效果不佳.这是我的HTML: <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown link </a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </li> 解决方法.dropdown {list-style: none; background: green; padding: 10px; display: inline-block;} .dropdown .nav-link {color:#fff; text-decoration: none;} .dropdown .dropdown-menu a{color: #000; text-decoration: none;} .dropdown .btn {background: green; color:#fff;} .dropdown .btn:hover {background: cyan; color:#000;} .dropdown .btn:active {background: cyan; color:#000;} .dropdown .btn:focus {background: cyan; color:#000;} .dropdown-menu .dropdown-item {display: inline-block; width: 100%; padding: 10px 5px;} .container .dropdown .dropdown-menu a:hover { color: #fff; background-color: #b91773; border-color: #fff; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown link </a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </li> </div> </body> </html> 这是一些代码,希望它能帮到你. 编辑 现在工作正常 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |