如何用Rails中的自定義替換引導樣式

我想在我的Rails頁面中覆蓋導航欄的默認主題，但似乎大部分時間只能與!important一起使用。如何用Rails中的自定義替換引導樣式

他們有什麼辦法可以讓我的自定義樣式表在預編譯器中最後加載？

這似乎只是在更改導航欄樣式時出現問題。我有一個單獨的標題部分我的導航欄。這可能嗎？

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>

來源

2016-09-13 Norman Chan

我建議你包括bootstrap as a gem（如果你還沒有）。然後，您可以深入瞭解gem文件並在其中定製現有的CSS。

你會發現這裏的樣式：

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

請記住，如果你更新你的寶石，這些自定義更改將在所有的可能性被覆蓋。

另類視角

如果你去getbootstrap.com，然後單擊「自定義」鏈接，就會被帶到頁面，您可以自定義引導做你需要它做什麼，這包括在一定程度上混淆默認配色方案。

來源

2016-09-14 02:55:19

永遠不要改變寶石的源代碼。這是絕對不好的做法。 – gmrash

我已將「bootstrap-sass」gem包含在我的應用程序中，但我沒有在我的應用程序文件夾中看到應用程序/供應商/軟件包/ gems/bootstrap-sass-3.3.5/assets/stylesheets /。在供應商目錄下，我看到一個資產目錄。 –

@gmrash我完全同意，這就是爲什麼我提出了一種替代方法。但要純粹回答問題，這是可行的。 –

需要您的自定義CSS網絡le或下面的文件夾在application.css中如果它不起作用，請參閱Chrome webdeb中的完整鏈類以及過去的自定義文件。

來源

2016-09-13 21:06:20 gmrash

我應該在我的application.scss require_self下需要它嗎？ –

對不起，我不確定我完全理解你的答案。 Chrome webdeb是什麼？ –

如何用Rails中的自定義替換引導樣式

回答

相關問題