使用Materialize CSS（rails）更改导航栏上的文本颜色

本文介绍了使用Materialize CSS（rails）更改导航栏上的文本颜色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想创建一个带有白色背景和黑色文本的导航栏，但是无法获取导航栏中的链接中的文本是白色的。

I want to create a navbar with a white background and black text, but have been unable to get the text in the links within the navbar to be anything but white.

我尝试过的事情：

- 将类black-text添加到li标签，ul标签， div和nav标签

- 在我的application.scss文件中为每个li标签定义一个类。

- 添加li，nav，a {color：black; }到我的application.scss文件

Things I've tried:
- adding the class "black-text" to the li tags, to the ul tag, to the surrounding div and nav tags
- defining a class in my application.scss file for each li tag.
- adding li, nav, a { color: black; } to my application.scss file

这是navbar的html：

Here is the html for the navbar:

  <header class="nav">
    <nav>
      <div class="nav-wrapper white">
        <a href="/" class="brand-logo black-text">GlobalPursuit</a>
        <ul id="nav-mobile" class="right hide-on-med-and-down">
          <li><%= link_to "Pursuits", pursuits_path %></li>
          <li><%= join_dashboard_path %></li>
          <li><%= login_logout_path %></li>
          <li><%= trips_cart_display %></li>
        </ul>
      </div>
    </nav>
  </header>

推荐答案

p>尝试这个与rails，我为我工作，所以如果你修改的风格。

Try this with rails, I worked for me, So if you modify the style. see in full page.

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.2/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.2/js/materialize.min.js"></script>

<style>
nav ul li a{
  color: black;
}
</style>
</head>

<body>
<header class="top-nav">

<div class="navbar-fixed">
  <nav>
    <div class="nav-wrapper white black-text">
      <a href="#!" class="brand-logo">Logo</a>
      <ul class="right hide-on-med-and-down">
        <li><a href="sass.html">Sass</a></li>
        <li><a href="badges.html">Components</a></li>
        <li class="active"><a href="collapsible.html">JavaScript</a></li>
      </ul>
    </div>
  </nav>
</div>

</header>
<main></main>
<footer></footer>
</body>
</html>

这篇关于使用Materialize CSS（rails）更改导航栏上的文本颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！