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>
ここにいくつかのコードがあります、それがあなたを助けることを願っています。
編集済み
今は正常に動作しています
私はこれがすでに回答されていることを知っていますが、ブックマークしているので、SassとNPMを使用して テーマBootsrap の場合に私のために働いたソリューションを提供したいと思います。
カスタムのものの上に関数と変数を含めることに注意してください。そうしないと、コンパイルに失敗します。 この問題に関する詳細を読む 。
次のような_custom.scss
があるとします:
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
// Add your custom variables here
@import "~bootstrap/scss/bootstrap";
次に、 Bootstrapのメイン変数ファイル に移動して、上書きしたいものをコピーします。
たとえば、ドロップダウンの背景を白のリンクで暗くしたい場合は、次のようにします。
$dropdown-bg: $dark;
$dropdown-link-color: $light;
そして、変更後の_custom.scss
ファイルは次のようになります。
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
// Add your custom variables here
$dropdown-bg: $dark;
$dropdown-link-color: $light;
@import "~bootstrap/scss/bootstrap";
これは、Sassをコンパイルした後のイメージです:
この方法では、不要な混乱を避けるためにCSSルールを上書きしません。
Bootstrap v4.3.1
単にコピーしますCSS path
ブラウザからdeveloper tools
、それを私のWebsite.css
、および私が構築しているウェブサイトのルックアンドフィールにいくつかのスタイルを追加します。
/*drop-down override*/
div.btn-group.show div.dropdown-menu.show {
background-color: #4b4b4b;
}
div.btn-group.show div.dropdown-menu.show button.dropdown-item {
color: #e1e1e1;
}
div.btn-group.show div.dropdown-menu.show div.dropdown-divider {
border-top: 1px solid rgba(50, 50, 50, 0.9);
}
div.btn-group.show div.dropdown-menu.show button.dropdown-item:hover,
div.btn-group.show div.dropdown-menu.show button.dropdown-item:focus {
background-color: #1e1e1e;
color: #f0f0f0;
}
結果は次のようになります。