我在设置导航栏样式时遇到问题,特别是导航栏中的下拉菜单。两个li
下面的元素(链接到“配置文件”和“编辑配置文件”的元素没有正确显示。如您所见,我以两种不同的方式添加了类 my-dropdown-item
,结果相同。导航栏的代码:
<div class="container">
<div class="header">
<div class="top-nav">
<ul class="nav1">
<li class="hvr-bottom <%= 'active' if current_page?(root_path) %>"><%= link_to "Home".html_safe, root_path %></li>
<li class="hvr-bottom <%= 'active' if current_page?(target_path) %>"><%= link_to "Target".html_safe, target_path %></li>
# The dropdown menu #
<li class="dropdown hvr-bottom" style="max-width:300px; width:auto;">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"> "Drop-down Menu"</a>
<ul class="dropdown-menu" role="menu">
<li><%= link_to "Profile", current_user, html_options = {class: "my-dropdown-item"} %></li>
<li class="my-dropdown-item"><%= link_to "Edit profile", edit_user_path(current_user) %></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
结果是字体显示为白色,而它应该是黑色。在我的 css 文件中我有:
.my-dropdown-item {
width: 100%;
color: #000;
}
使用检查器我可以看到颜色被 .top-nav ul li a
的样式否决了。 (因此 my-dropdown-item
指定的字体颜色被划线)。后一种样式存在于 css 文件 file1.css 中,而 .my-dropdown-item
存在于 file2.css 中。在 application.css
我有:*= require file1
在 *= require file2
行之前.所以我不明白为什么.top-nav ul li a
否决.my-dropdown-item
. 知道如何找出原因以及如何处理吗?
最佳答案
在link_to中添加覆盖类:
<%= link_to "Edit profile", edit_user_path(current_user), class:"my-dropdown-item" %>
添加到 CSS
.my-dropdown-item {
a {
width: 100%;
color: #000 !important;
}
}
这可能需要一些调整,让我知道。
关于html - 样式导航栏 : interaction between different styling settings,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30846636/