我將如何修改 CSS 來更改 Bootstrap 4 中導航欄的顏色？我該如何解決？這是我的代碼你可以檢查一下<nav class="navbar navbar-expand-lg navbar-dark bg-transparent"> <div class="container"> <a class="navbar-brand" href="#"><img src="img/logo.png"></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarTogglerDemo02"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="#" style="color: #1fd0b6;">Fiverr Pro</a> </li> <li class="nav-item"> <a href="#" class="nav-link"><span><img src="https://fiverr-dev-res.cloudinary.com/general_assets/flags/1f1fa-1f1f8.png" style="width: 20px; height: 20px;"></span><span class="p-2">English</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Become a Seller</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Sign In</a> </li> <li class="nav-item"> <a class="nav-link" href="#"> Join </a> </li> </ul> </div> </div></nav>你可以檢查我的CSS* { margin: 0; padding: 0;}.nav-link { font-size: 16px; font-weight: 600;}.nav-item { margin: 2px;}是否可以通過引導類改變顏色
3 回答
慕少森
TA貢獻2019條經驗 獲得超9個贊
我猜它已經有一個顏色集，因為它的類是“navbar-dark”，所以你可以直接更改顏色，但是通常如果已經設置了一個類，你將必須更改導航欄類來更改顏色，但是你可以用 !important 覆蓋它（但不推薦）
.navbar {
background-color: orange !important;
}
拉丁的傳說
TA貢獻1789條經驗 獲得超8個贊
首先，您可能想看看這里：https://getbootstrap.com/docs/4.4/components/navbar/#color-schemes
在這里您可以使用 navbar-light 類而不是 navbar-dark 類。同樣，您可以使用 bg-primary、bg-success、bg-info、bg-warning、bg-danger、bg-secondary、bg-dark 和 bg-ligh 類之一來代替 bg-transparent 類背景顏色。如果您想使用除這些之外的顏色，您可以在鏈接到您的頁面的樣式文件中定義您自己的類，并使用上面的 bootstarp 類。例如：
.my-bg-color{
background-color: #123456;
}
.my-navbar-theme .navbar-brand {
color: # ff0;
}
.my-navbar-theme .navbar-brand: hover, .my-navbar-theme .navbar-brand: focus {
color: # ff0;
}
.my-navbar-theme .navbar-nav .nav-link {
color: rgba (255, 255, 0, 0.5);
}
.my-navbar-theme .navbar-nav .nav-link: hover, .my-navbar-theme .navbar-nav .nav-link: focus {
color: rgba (255, 255, 0, 0.75);
}
.my-navbar-theme .navbar-nav .nav-link.disabled {
color: rgba (255, 255, 0, 0.25);
}
.my-navbar-theme .navbar-nav .show> .nav-link,
.my-navbar-theme .navbar-nav .active> .nav-link,
.my-navbar-theme .navbar-nav .nav-link.show,
.my-navbar-theme .navbar-nav .nav-link.active {
color: # ff0;
}
.my-navbar-theme .navbar-toggler {
color: rgba (255, 255, 0, 0.5);
border-color: rgba (255, 255, 0, 0.1);
}
.my-navbar-theme .navbar-toggler-icon {
background-image: url ("data: image / svg + xml,% 3csvg xmlns = 'http: //www.w3.org/2000/svg' width = '30 'height = '30' viewBox = '0 0 30 30 '% 3e% 3cpath stroke =' rgba (255, 255, 0, 0.5) 'stroke-linecap =' round 'stroke-miterlimit = '10' stroke-width = '2' d = 'M4 7h22M4 15h22M4 23h22' / 3c% 3% / 3% SVG ");
}
.my-navbar-theme .navbar-text {
color: rgba (255, 255, 0, 0.5);
}
.my-navbar-theme .navbar-text a {
color: # ff0;
}
.my-navbar-theme .navbar-text a: hover, .my-navbar-theme .navbar-text a: focus {
color: # ff0;
}
然后，您可以添加自己的類而不是引導類。
<nav class="navbar navbar-expand-lg my-navbar-theme my-bg-color">
ABOUTYOU
TA貢獻1812條經驗 獲得超5個贊
如果我理解你的要求，你想要navbar有顏色嗎？
* {
margin: 0;
padding: 0;
}
.nav-link {
font-size: 16px;
font-weight: 600;
}
.nav-item {
padding: 5px;
background-color: gray;
display: inline-block;
border: 1px solid black;
}
<nav class="navbar navbar-expand-lg navbar-dark bg-transparent">
<div class="container">
<a class="navbar-brand" href="#"><img src="img/logo.png"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#" style="color: #1fd0b6;">Fiverr Pro</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link"><span><img
src="https://fiverr-dev-res.cloudinary.com/general_assets/flags/1f1fa-1f1f8.png" style="width: 20px; height: 20px;"></span><span class="p-2">English</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Become a Seller</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sign In</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Join
</a>
</li>
</ul>
</div>
</div>
</nav>
- 3 回答
- 0 關注
- 195 瀏覽
添加回答
舉報
0/150
提交
取消