更改Bootstrap类navbar-brand的字符颜色

Question

我正在尝试更改导航栏品牌名称的颜色：

对此：

对于段落中的任何文字，例如，我使用此 html 代码：

<span style="color: #e74c3c">P</span>aper<span style="color: #e67e22">S</span>tack</h1>

但是我不确定如何操作，因为我使用嵌入式 Ruby 代码作为我的导航栏品牌名称

<%= link_to 'PaperStack', root_path, class: "navbar-brand" %>

有任何帮助吗？

Answer 1

您可以在link_to文本中添加范围，只需在字符串上调用html_safe即可。

<%= link_to '<span style="color: #e74c3c">P</span>aper<span style="color: #e67e22">S</span>'.html_safe, root_path, class: "navbar-brand" %>

Answer 2

<%= link_to root_path do %>
  html-code-here
<% end %>

在这里回答：How do I wrap link_to around some html ruby code?

Answer 3

如何使用hepler方法：

def navbar_brand_text
  content_tag :span, 'P', class: 'letter-p' +
  content_tag :span, 'aper', class: 'paper' +
  content_tag :span, 'S', class: 'letter-s' +
  content_tag :span, 'tack', class: 'stack'
end

然后你可以像这样使用它：

<%= link_to navbar_brand_text, root_path, class: 'navbar-brand' %>

然后使用CSS来限制跨度：

.letter-p {
  color: #foo;
}
/* etc... */