我正在尝试覆盖我的 Rails 页面中导航栏的默认主题,但大多数时候它似乎只能与 !important
一起使用。
他们有什么办法可以让我的自定义样式表最后加载到预编译器中吗?
似乎只有在更改导航栏样式时才会出现问题。我的导航栏位于单独的标题部分中。会不会是这样?
自定义.scss
@import 'bootstrap';
@import 'bootstrap-sprockets';
$light-blue: #01579b;
$light-grey: #f5f5f5;
/* main-nav-bar */
.navbar {
background-color: white;
}
.nav.navbar-nav a, .navbar-brand {
color: $light-blue !important;
transition: all 0.3s;
}
.navbar-nav .active a {
background-color: $light-grey !important;
}
.navbar-nav a:hover {
background-color: $light-grey !important;
}
application.scss
/*
*= require_tree
*= require_self
*/
html
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">OBOOK</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">
<%= link_to 'Home', root_path %>
</li>
<% if user_signed_in? %>
<li><%= link_to 'Users', users_path %></li>
<li class="dropdown">
<%= link_to 'Profile', current_user, class: "dropdown-toggle", data: {toggle: "dropdown"} %></li>
<li><%= link_to 'Settings', edit_user_registration_path %></li>
<li><%= link_to 'Sign Out', destroy_user_session_path, method: :delete %></li>
</ul>
<p class="navbar-text navbar-right">Signed in as: <%= link_to current_user.email, current_user %></p>
<% else %>
<ul class="nav navbar-nav">
<li><%= link_to 'Sign in', new_user_session_path %></li>
</ul>
<% end %>
<ul class="nav navbar-nav">
<li><%= link_to 'About', about_path %></li>
</ul>
</div>
</div>
</div>
</nav>
最佳答案
在 application.css 中需要您的自定义 css 文件或文件夹 如果它没有帮助,请在 Chrome webdeb 中查看完整的类链并传递给您的自定义文件。
关于html - 如何在 Rails 中使用自定义样式覆盖 Bootstrap 样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39478391/