CSS 未应用于 .erb 中的表单元素

Question

我正在尝试将 css 应用于 .erb 中的表单，但它似乎不起作用。

CSS

.submit-form{
    margin-left:auto;
    margin-right:auto;
    max-width: 500px;
    background: #F7F7F7;
    padding: 25px 15px 25px 10px;
    font: 12px Georgia, "Times New Roman", Times, serif;
    color: #888;
    text-shadow: 1px 1px 1px #FFF;
    border:1px solid #E4E4E4;
}

HTML

h1>Submit page </h1>
    <div class="submit-form">
    <%= simple_form_for Post.new do |f| %> 
       <%= f.input :title  %>
        <%= f.input :blurb %> 
       <%= f.input :funding_goal %>
       <%= f.input :funding_duration %>   
      <%= f.button :submit %>  
    <% end %> 
    </div> 

这是 application.css 文件中的代码

.hidden
{
  display: none;
}
.pull-left {
    float: left;
}
.pull-right {
    float: right;
}
.simple_form label {  
  float: left;  
  width: 100px;  
  text-align: right;  
  margin: 2px 10px;  
}  

.simple_form div.input {  
  margin-bottom: 10px;  
}  

.simple_form div.boolean, .simple_form input[type='submit'] {  
  margin-left: 120px;  
}  

.simple_form div.boolean label {  
  float: none;  
  margin: 0;  
}  

我想知道是否需要将我的 sbmit.css.scss 添加到 appplication.css 文件中

main.css

@import "variables";
@import "primitives";
@import "header";
@import "footer";

@import "homepage";
@import "share";
@import "checkout";

Answer 1

首先尝试使用如下标签在 .erb 文件中添加 css：

 <style>

 .submit-form{
     margin-left:auto;
     margin-right:auto;
     max-width: 500px;
     background: #F7F7F7;
     padding: 25px 15px 25px 10px;
     font: 12px Georgia, "Times New Roman", Times, serif;
     color: #888;
     text-shadow: 1px 1px 1px #FFF;
     border:1px solid #E4E4E4; }

 </style>

如果它工作正常，请尝试将 css 放入 application.css（或您在布局中提到的 css 文件）并检查。

Answer 2

如果您的问题是样式未应用于form 元素，那是因为您没有将其应用于form 元素，而是应用于div 元素。要将类添加到 form 元素：

...
simple_form_for Post.new, class: "submit-form" do |f|
...

Answer 3

尝试在您的 erb 文件中将类放入 form 标记中..

<%= stylesheet_link_tag 'application'%>
<%= simple_form_for Post.new ,:html=>{:class => 'submit-form'} do |f| %>

将其放入 app/assets/stylesheets/

下的 application.css 文件中

 .submit-form{
     margin-left:auto;
     margin-right:auto;
     max-width: 500px;
     background: #F7F7F7;
     padding: 25px 15px 25px 10px;
     font: 12px Georgia, "Times New Roman", Times, serif;
     color: #888;
     text-shadow: 1px 1px 1px #FFF;
     border:1px solid #E4E4E4; }

Answer 4

要给你一个应该有效的答案，试试这个：

#app/assets/stylesheets/application.css.scss
@import "variables";
@import "primitives";
@import "header";
@import "footer";
@import "submit";

@import "homepage";
@import "share";
@import "checkout";

#app/assets/stylesheets/submit.css.scss
.submit-form { 
    margin-left:auto;
    margin-right:auto;
    max-width: 500px;
    background: #F7F7F7;
    padding: 25px 15px 25px 10px;
    font: 12px Georgia, "Times New Roman", Times, serif;
    color: #888;
    text-shadow: 1px 1px 1px #FFF;
    border:1px solid #E4E4E4;
}

#app/views/layouts/application.html.erb
<%= stylesheet_link_tag "application" %>

#app/views/controller/form.html.erb
<div class="submit-form">
   ...
</div>

如果您将上述代码应用于您的应用程序，它应该适合您，无论您的应用程序中是否存在任何依赖项等。

---

资产管道

为了让您更清楚地了解它的工作原理 - 您需要考虑 asset pipeline 在 Rails 应用程序中的作用 - 这将解决您未来的所有 CSS 问题。

当您运行 Rails 应用程序时，您基本上必须“模块化”应用程序以确保它能够以最有效的方式运行。这意味着将您的 views、controllers、models 和 assets 分开。

因为 Rails 是 MVC framework，所以您没有许多程序员习惯的“逻辑”流程。相反，您有一个面向对象的流程，它将您的资产牢牢地放在处理的主要“批量”一侧。

因此，为了使您的资产正常工作，您基本上需要将它们包含在您的布局中。当它们包含在布局中时，由您决定是否包含了您可能需要的各种依赖资产文件，从而允许您根据需要创建和调用各种类，如上所示