CSS不识别类答案

【问题标题】：CSS not recognising classCSS不识别类
【发布时间】：2023-04-10 04:37:01
【问题描述】：

尝试调整图像的高度和宽度，但 CSS 无法识别类别/无法正常工作。我知道我的类方法与我的其他类不同，但是当我尝试使其相同时，它会给出错误消息。我正在使用 Ruby 语言。这可能会很简单，但我对此太陌生，无法理解。 Twitter引导行也有问题。如果您也能从中看出任何问题，我将永远感激不尽。

HTML 是：

<div class="container">
  <div class="row">
    <div class="col-md-3">
      <%= image_tag @user.profile.avatar.url, class: 'lego-man' %>
    </div>
    <div class="col-md-6">
      <h1><%= @user.profile.first_name %> <%= @user.profile.last_name %></h1>
      <h3><%= @user.profile.job_title %></h3>
      <div class="well">
        <h3>Decription</h3>
        <%= @user.profile.description %>
      </div>
      <% if current_user.plan_id == 2 %>
        <div class="well">
          <h3>Contact Information</h3>
          <%= @user.profile.phone_number %><br/>
          <%= @user.profile.contact_email %><br/>
        </div>
      <% end %>
    </div>
  </div>
</div>

CSS 是：

.lego-man {
  width: 128px;
  height: 128px;
}

【问题讨论】：

你在哪里写这个css代码。我的意思是在哪个文件中？
它在样式表文件夹中。你想要名字还是？
尝试将display: none 放在.lego-man { 中，看看这些css是否有效
抱歉，这是我的第二个样式表。我的文件夹中有 2 个样式表。那会改变什么吗？当然你可以多张纸

标签： css ruby-on-rails ruby class

【解决方案1】：

你可以这样试试

 <%= image_tag @user.profile.avatar.url , size: "128x128" %>

供参考

点击这里：-https://apidock.com/rails/ActionView/Helpers/AssetTagHelper/image_tag

【讨论】：

硬编码这样工作（谢谢！），但只是想知道为什么这些类不起作用？只是努力学习，这样我以后可以避免它
对于你之前的代码，尝试一次这样通过添加parathesis。
不，这只是给出了一条错误消息。不期待'，'。我删除了它，但后来它说意外 tLABEL，期待 ')' ，但我的代码已经关闭。
希望我没有浪费您的时间。但是如果你有时间可以试试这个
一点也不！感谢您的帮助！这个错误快把我逼疯了。

【解决方案2】：

在 Rails 中，可以使用三种方法来添加 CSS 样式。

在 image_tag 中添加该样式属性内联

<%= image_tag @user.profile.avatar.url, :style => "width: 128px; height: 128px;" %>

使用<style>标签在同一文件内部添加此样式属性

<style>
  .lego-man {
    width: 128px;
    height: 128px;
  }
</style>

在 app/assets/stylesheets/application.css

【讨论】：

【解决方案3】：

只需确保您正在编写的 CSS 代码正确加载即可。

例如在您的layouts/application.html.erb 中包含这种类型的行加载application.css
<%= stylesheet_link_tag 'application', media: 'all' %>
并且包含css 的文件包含在application.css 中

【讨论】：

【解决方案4】：

.lego-man {
  width: 128px!important;
  height: 128px!important;
}

尝试使用 override 你的类。

<div class: 'lego-man'>
  <%= image_tag @user.profile.avatar.url %>
</div>

然后添加 <%= stylesheet_link_tag 'application', media: 'all' %> 应用布局

【讨论】：