[英]Changing Bootstrap nav-link color
我正在嘗試將 Bootstrap 的導航鏈接更改為白色,但我不能。 這是我的代碼。
<nav class="navbar navbar-light" style="background-color: #5E9DFE;">
<a class="navbar-brand" href="/"><span class="yellow">Div</span><span class="plate">Aid</span> <span class="salmon">T</span><span class="green">asks</span></a>
<button aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbar" data-toggle="collapse" type="button">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
{% if session.user_id %}
<ul class="navbar-nav mr-auto mt-2" id="add-del">
<li class="nav-item"><a class="nav-link" href="/add">Agregar</a></li>
<li class="nav-item"><a class="nav-link" href="/delete">Eliminar</a></li>
</ul>
<ul class="navbar-nav ml-auto mt-2">
<li class="nav-item"><a class="nav-link" href="/logout">Cerrar sesión</a></li>
</ul>
{% else %}
<ul class="navbar-nav mr-auto mt-2" id="log-reg">
<li class="nav-item"><a class="nav-link" href="/register">Registro</a></li>
<li class="nav-item"><a class="nav-link" href="/login">Iniciar Sesión</a></li>
</ul>
{% endif %}
</div>
</nav>
在看到以前的答案和CSS 特異性文檔后,我嘗試更改它:
nav .navbar-nav mr-auto mt-2 .nav-item .navlink{
color: #ffffff;
}
nav .navbar-nav mr-auto mt-2 .nav-item .navlink:hover{
color: #e8e8e8;
}
但仍然缺少一些東西。 我感謝您的幫助。
.nav-link { color: red; } .nav-link:hover { color: green; }
<nav class="navbar navbar-light" style="background-color: #5E9DFE;"> <a class="navbar-brand" href="/"><span class="yellow">Div</span><span class="plate">Aid</span> <span class="salmon">T</span><span class="green">asks</span></a> <button aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbar" data-toggle="collapse" type="button"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbar"> {% if session.user_id %} <ul class="navbar-nav mr-auto mt-2" id="add-del"> <li class="nav-item"><a class="nav-link" href="/add">Agregar</a></li> <li class="nav-item"><a class="nav-link" href="/delete">Eliminar</a></li> </ul> <ul class="navbar-nav ml-auto mt-2"> <li class="nav-item"><a class="nav-link" href="/logout">Cerrar sesión</a></li> </ul> {% else %} <ul class="navbar-nav mr-auto mt-2" id="log-reg"> <li class="nav-item"><a class="nav-link" href="/register">Registro</a></li> <li class="nav-item"><a class="nav-link" href="/login">Iniciar Sesión</a></li> </ul> {% endif %} </div> </nav>
你的 css 嵌套是錯誤的
嘗試這個:
nav .navbar-nav.mr-auto.mt-2 .nav-item .nav-link{
color: #ffffff;
}
如果這不能解決問題,請嘗試添加!Important
以粉碎預定義的引導程序樣式
nav .navbar-nav.mr-auto.mt-2 .nav-item .nav-link{
color: #ffffff !important;
}
您可以簡單地將導航鏈接類中的 CSS 設置為白色
.nav-link {color: white;}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.