Railsでカスタムブートストラップスタイルをオーバーライドする方法

Question

私はレールページのnavbarのデフォルトテーマをオーバーライドしようとしていますが、ほとんどの場合は!importantとしか動作しません。

私のカスタムスタイルシートをプリコンパイラの最後にロードすることができますか？

これはナビゲーションバーのスタイルを変更するときにのみ問題があるようです。別のヘッダー部分に私のnavbarがあります。それはそれかもしれませんか？

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

bootstrap as a gem（あなたがまだいない場合）を含めることをお勧めします。次に、gemファイルにドリルダウンして、そこにある既存のCSSをカスタマイズすることができます。

あなたがここのスタイルを見つけることができます：

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

は、あなたの宝石を更新した場合、これらのカスタム変更は、すべての可能性に上書きされることに注意してください。

代替アプローチ

あなたがgetbootstrap.comに移動し、「カスタマイズ」リンクをクリックすると、あなたはあなたがそれを行う必要が正確に何を行うには、ブートストラップをカスタマイズすることができますページが表示されます、これには、ある程度までデフォルトのカラースキームを使いこなすことが含まれます。

Answer 2

は、あなたのカスタムCSS Fiが必要ですleまたはapplication.cssの下にあるフォルダ それが役に立たない場合は、Chrome webdebのクラスのフルチェーンを参照して、カスタムファイルを継承してください。