Rails 导航栏颜色没有完全改变 Bootstrap
Rails navbar color not changing completely Bootstrap
我是 rails 的新手,到目前为止我一直在尝试更改导航栏的颜色。
我几乎阅读了有关该主题的所有内容,但还没有看到像我这样的案例。
正如您在图片中看到的,导航栏更改为我想要的颜色,但由于某种原因,角落仍然是黑色,而且我的下拉菜单的背景仍然是黑色。
嗯,我是新来的,所以不能上传图片。
github 存储库位于 https://github.com/nanurbina/janus.git
希望有人能帮帮我。
这是我在 _navigation.html.erb
上的代码
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<%= link_to 'Janus BPO', root_path, class: 'navbar-brand' %>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<%= render 'layouts/navigation_links' %>
</ul>
</div>
和 css.scss
上的代码
@import "bootstrap-sprockets";
@import "bootstrap";
.navbar-brand {
font-size: inherit;
background-color:#2d246d;
border-color:#2d246d;
color:#2d246d;
}
.navbar-collapse
{
background-color:#2d246d;
border-color:#2d246d;
color:#2d246d;
}
.navbar-inverse .container {
background-color:#2d246d;
border-color:#2d246d;
color:#2d246d;
}
谢谢!
将 navbar-inverse
替换为 html 上的 myNavbar
,并将以下内容添加到 CSS:
.myNavbar {
background-color: #ccc;
color:#222;
border: 1px solid #333;
}
只需将颜色代码更改为您想要的颜色代码即可。
我是 rails 的新手,到目前为止我一直在尝试更改导航栏的颜色。 我几乎阅读了有关该主题的所有内容,但还没有看到像我这样的案例。 正如您在图片中看到的,导航栏更改为我想要的颜色,但由于某种原因,角落仍然是黑色,而且我的下拉菜单的背景仍然是黑色。
嗯,我是新来的,所以不能上传图片。 github 存储库位于 https://github.com/nanurbina/janus.git 希望有人能帮帮我。
这是我在 _navigation.html.erb
上的代码<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<%= link_to 'Janus BPO', root_path, class: 'navbar-brand' %>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<%= render 'layouts/navigation_links' %>
</ul>
</div>
和 css.scss
上的代码 @import "bootstrap-sprockets";
@import "bootstrap";
.navbar-brand {
font-size: inherit;
background-color:#2d246d;
border-color:#2d246d;
color:#2d246d;
}
.navbar-collapse
{
background-color:#2d246d;
border-color:#2d246d;
color:#2d246d;
}
.navbar-inverse .container {
background-color:#2d246d;
border-color:#2d246d;
color:#2d246d;
}
谢谢!
将 navbar-inverse
替换为 html 上的 myNavbar
,并将以下内容添加到 CSS:
.myNavbar {
background-color: #ccc;
color:#222;
border: 1px solid #333;
}
只需将颜色代码更改为您想要的颜色代码即可。