如何在Rails中用自定义样式覆盖引导样式

Question

I'm trying to override the default theme for the navbar in my rails page but it only seems to work with !important most of the time.

Is their any way I could have my custom stylesheet loaded last in the precompiler?

It seems to only be a problem when changing the navbar styles. I have my navbar in a separate header partial. Could that be it?

custom.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>

Answer 1

需要在application.css中使用下面的自定义css文件或文件夹。如果这样做无济于事，请查看Chrome webdeb中完整的类链以及过去的自定义文件。

Answer 2

I'd recommend you include bootstrap as a gem (If you aren't already). Then you could drill down into the gem files and customise the existing CSS in there for instance.

You'll find the styles here:

app/vendor/bundle/gems/bootstrap-sass-3.3.5/assets/stylesheets/.

Keep in mind that if you update your gems, these custom changes will in all likelihood be overwritten.

Alternative Approach

If you go to getbootstrap.com , and click on the “Customise” link, you'll be taken to the page where you can customise Bootstrap to do exactly what you need it to do, this includes messing with the default color scheme to a certain extent.