我的导航栏不工作(bootstrap 与 rails 上的 ruby 集成)
my nav bar is not working ( bootstrap integrated with ruby on rails)
˚
我的风格(css)
.navbar-default {
background-color: transparent;
border-color: transparent;
}
.navbar-default .navbar-brand {
color: #fed136;
font-family: "Kaushan Script", "Helvetica Neue", Helvetica, Arial, cursive;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus,
.navbar-default .navbar-brand:active,
.navbar-default .navbar-brand.active {
color: #fec503;
}
.navbar-default .navbar-collapse {
border-color: rgba(255, 255, 255, 0.02);
}
.navbar-default .navbar-toggle {
background-color: #fed136;
border-color: #fed136;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: white;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: darkblue;
}
.navbar-default .nav li a {
font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
text-transform: uppercase;
font-weight: 400;
letter-spacing: 1px;
color: white;
}
.navbar-default .nav li a:hover,
.navbar-default .nav li a:focus {
color: #fed136;
outline: none;
}
.navbar-default .navbar-nav > .active > a {
border-radius: 0;
color: white;
background-color: #fed136;
}
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: white;
background-color: #fec503;
}
.navbar {
background-color: transparent;
background: transparent;
border-color: transparent;
}
.navbar-inner {
background:transparent;
}
.navbar li { color: #000 }
@media (min-width: 768px) {
.navbar-default {
background-color: transparent;
padding: 25px 0;
-webkit-transition: padding 0.3s;
-moz-transition: padding 0.3s;
transition: padding 0.3s;
border: none;
}
.navbar-default .navbar-brand {
font-size: 2em;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.navbar-default .navbar-nav > .active > a {
border-radius: 3px;
}
.navbar-default.navbar-shrink {
background-color: #222;
padding: 10px 0;
}
.navbar-default.navbar-shrink .navbar-brand {
font-size: 1.5em;
}
}
我怎么插入这个css
<%= stylesheet_link_tag 'test' %>
它的路径:/assets/stylesheet/test.css
实际上这些代码是从以下模板中复制的
http://blackrockdigital.github.io/startbootstrap-agency/
但是我不知道为什么我的导航栏不透明
我在 rails
上使用 bootstrap 与 ruby 集成
安装 Bootstrap gem 后,确保将 application.css
更改为 application.scss
将您的样式放入 app/assets/stylesheets/application.scss
在你的 application.scss
你可以 @import test.css
˚ 我的风格(css)
.navbar-default {
background-color: transparent;
border-color: transparent;
}
.navbar-default .navbar-brand {
color: #fed136;
font-family: "Kaushan Script", "Helvetica Neue", Helvetica, Arial, cursive;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus,
.navbar-default .navbar-brand:active,
.navbar-default .navbar-brand.active {
color: #fec503;
}
.navbar-default .navbar-collapse {
border-color: rgba(255, 255, 255, 0.02);
}
.navbar-default .navbar-toggle {
background-color: #fed136;
border-color: #fed136;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: white;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: darkblue;
}
.navbar-default .nav li a {
font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
text-transform: uppercase;
font-weight: 400;
letter-spacing: 1px;
color: white;
}
.navbar-default .nav li a:hover,
.navbar-default .nav li a:focus {
color: #fed136;
outline: none;
}
.navbar-default .navbar-nav > .active > a {
border-radius: 0;
color: white;
background-color: #fed136;
}
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: white;
background-color: #fec503;
}
.navbar {
background-color: transparent;
background: transparent;
border-color: transparent;
}
.navbar-inner {
background:transparent;
}
.navbar li { color: #000 }
@media (min-width: 768px) {
.navbar-default {
background-color: transparent;
padding: 25px 0;
-webkit-transition: padding 0.3s;
-moz-transition: padding 0.3s;
transition: padding 0.3s;
border: none;
}
.navbar-default .navbar-brand {
font-size: 2em;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.navbar-default .navbar-nav > .active > a {
border-radius: 3px;
}
.navbar-default.navbar-shrink {
background-color: #222;
padding: 10px 0;
}
.navbar-default.navbar-shrink .navbar-brand {
font-size: 1.5em;
}
}
我怎么插入这个css
<%= stylesheet_link_tag 'test' %>
它的路径:/assets/stylesheet/test.css
实际上这些代码是从以下模板中复制的
http://blackrockdigital.github.io/startbootstrap-agency/
但是我不知道为什么我的导航栏不透明
我在 rails
上使用 bootstrap 与 ruby 集成安装 Bootstrap gem 后,确保将 application.css
更改为 application.scss
将您的样式放入 app/assets/stylesheets/application.scss
在你的 application.scss
你可以 @import test.css