Question

我正在尝试覆盖导轨页面中导航栏的默认主题，但它似乎只在大多数情况下与@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; }一起使用。

他们是否可以在预编译器中最后加载自定义样式表？

更改导航栏样式似乎只是一个问题。我的导航栏位于单独的标题部分中。可能是吗？

custom.scss

/*
 *= require_tree
 *= require_self
*/

application.scss

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

HTML

stdout

Answer 1

在application.css中需要您的自定义css文件或文件夹如果它没有帮助，请参阅Chrome webdeb中的完整连锁类以及过去自定义文件。

Answer 2

我建议您加入bootstrap as a gem（如果您还没有）。然后，您可以深入查看gem文件并自定义其中的现有CSS。

你会在这里找到样式：

addFile(file)

请注意，如果您更新了宝石，这些自定义更改很可能会被覆盖。

替代方法

如果您转到getbootstrap.com，然后点击“自定义”链接，您将进入可以自定义Bootstrap的页面，以完全按照您的需要执行操作，这包括弄乱默认配色方案在一定程度上。

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

2 个答案: