Question

我在导轨上使用ruby并使用导航条进行导航 - 想要设置一种更改＆＃39; ZM徽标的方法。通过scss样式表设置来改变导航栏的大小。

Application.html.erb =

  <div class="navbar-header">
    <a class="navbar-brand" href="#">
      <%= link_to image_tag('ZM Logo (colour).jpg'), class: "Logo" %> 
    </a>
  </div>


    <ul class="navbar-nav">
      <li class="nav-item"><%= link_to "Home", root_path, class: "nav-link" %></li>
      <li class="nav-item"><%= link_to "About", about_path, class: "nav-link" %></li>
      <li class="nav-item"><%= link_to "Contact", "#", class: "nav-link" %></li>
    </ul>
</div>

在样式表中，我创建了一个navbar.scss文件来进行更改，并在应用程序中为该文件添加了@import。 Class＆＃39; Logo＆＃39;似乎没有工作。

任何想法都会很棒！

Answer 1

当您编写如下代码时：

<%= link_to image_tag('ZM Logo (colour).jpg'), class: "Logo" %>

您正在将课程"Logo"应用于a代码。

当您编写如下代码时：

<%= link_to image_tag('ZM Logo (colour).jpg', class: "Logo") %>

您正在将课程"Logo"应用于img代码。

微妙的区别在于闭合圆括号的位置。请查看您的样式表，看看您是否尝试将"Logo"类应用于a标记或img标记。

现在，如果你看一下大图，你就是想在链接中放一个链接。

以下内容：

<a class="navbar-brand" href="#">
  <%= link_to image_tag('ZM Logo (colour).jpg'), class: "Logo" %> 
</a>

将产生：

<a class="navbar-brand" href="#">
  <a class="Logo"><img source='ZM Logo (colour).jpg'></a>    
</a>

当你真正想要的是：

<a class="navbar-brand" href="#">
  <%= image_tag 'ZM Logo (colour).jpg', class: "Logo" %> 
</a>

将产生：

<a class="navbar-brand" href="#">
  <img source='ZM Logo (colour).jpg', class='Logo'>
</a>

使用Rails功能时要小心，如有疑问，请右键单击Web浏览器中的元素，然后单击Inspect element。这样您就可以看到HTML输出。

如何对rails上的图像进行SCSS更改

1 个答案: