css - 在 Rails 中添加 link_to 后，我似乎无法在 CSS 中定位 navbar-brand 元素

问题描述

将导航链接交换到 rails 中的 link_to 后，我无法再定位 css 中的导航栏品牌。我究竟做错了什么？

我已经尝试将它放入一个 div 并给它一个 id 但没有成功

像我为 About 链接所做的那样在 rails 中添加一个 id 将针对 navbar-brand 但随后它将徽标和 navbar-brand 移动到导航栏的顶部，顶部没有边框或填充

<!DOCTYPE html>
<html>
  <head>
    <title>Saasapp</title>
    <%= csrf_meta_tags %>
    <link href="//fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
      <nav class="navbar navbar-default navbar-static-top" id="navbar" role="navigation">
        <div class='container'>
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav-collapse">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <div id="navbar-brand">
              <%= link_to root_path, class: "navbar-brand" do %>
                <i class="fa fa-group"></i>DevMatch
              <% end %>
            </div>
          </div>
          <div class="collapse navbar-collapse" id="main-nav-collapse">
            <ul class="nav navbar-nav navbar-right">
              <li><%= link_to "About" , about_path, {id: 'about' } %></li>
            </ul>
          </div><!-- /.navbar-collapse -->
        </div>
      </nav>

    <%= yield %>

  </body>
</html>

这也是有问题的 CSS，我正在尝试更改导航栏品牌和徽标的颜色：

//Background gradient
.home-callout, .navbar {
        background: #5433FF;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #A5FECB, #20BDFF, #5433FF);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #A5FECB, #20BDFF, #5433FF); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

// Home-page Styles
.home-callout {
    color: #00264d;
   margin-top: -20px;
   padding-top: 50px;
   padding-bottom: 100px;
}

//Nav Styles

* {
  margin: 0;
  border: 0;
  padding: 0;
}

#navbar {
    border: 0;
}

.navbar-brand {

    color: #661aff;
    &:hover{
        opacity: 0.75;
    }

}

#about {

    color: #99ffff;
    &:hover{
        opacity: 0.75;
    }
}

@import 'bootstrap-sprockets';
@import 'bootstrap';

//Typography Styles
h1, h2, h3 {
    font-family: 'Open Sans', sans-serif;
}

@import 'font-awesome-sprockets';
@import 'font-awesome';

标签： cssruby-on-railscss-selectors

css - 在 Rails 中添加 link_to 后，我似乎无法在 CSS 中定位 navbar-brand 元素

问题描述

解决方案

推荐阅读