如何更改引導程序4下拉顏色？

我想改變bootstrap 4下拉導航的背景和字體顏色。如何更改引導程序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>

來源

2017-06-18 Temple

.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>

下面是一些代碼，希望它會幫助你。

編輯

這是工作的罰款現在

來源

2017-06-18 08:00:28

嗨，老兄，我實際使用引導4，我的澄清。這是偉大的，除了它不適用於版本4 – Temple

好吧讓我檢查引導4保持 –

甜，謝謝。 – Temple

如何更改引導程序4下拉顏色？

回答

相關問題