我知道这个话题已经被打死了,但我读过的内容却没有用。我只是想将我的bootstrap导航栏中的链接更改为白色。我知道我有CSS,因为我可以改变字体大小,但不能改变颜色。
nav .navbar-nav li{
color: white !important;
font-size: 25px;
}
<nav class="navbar navbar-expand-lg navbar-light fixed-top sticky-top">
<%= link_to root_path, class: 'navbar-brand' do %>
<span class="fa fa-home" aria-hidden="true"> Bartlett Containers LLC</span> <% end %>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav">
<li class="nav-item">
<%=link_to 'Pricing', pricing_path, class: 'nav-link' %>
</li>
<li class="nav-item">
<%=link_to 'FAQ', faq_path, class: 'nav-link' %>
</li>
<li class="nav-item">
<%=link_to 'Contact', contact_path, class: 'nav-link' %>
</li>
</ul>
</div>
</nav>
答案 0 :(得分:3)
在color
内的a
元素上设置li
。
nav .navbar-nav li a{
color: white !important;
}
答案 1 :(得分:3)
foreach (var x in data)
{
Console.WriteLine(x.fruit);
}
标志仅用于快速测试。使用它作为永久解决方案往往会导致问题,因此应该避免。
覆盖css的最佳做法是确保自定义css规则的特异性符合或超过相应Bootstrap规则的特异性。当然,必须在Bootstrap css之后加载自定义css。
因此,在这种特殊情况下,您可以使用如下所示的规则:
!important
有关CSS特异性的更多信息:
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity