Question

我在联系我们页面中有完整版的表格。我在主索引页面上也有一个相同表单的精简版本。精简版需要一些CSS，但是我正在使用#new_customer作为选择器将CSS添加到两个版本中。如何将te CSS仅应用于索引页面上的精简版本？

这是用于显示我如何使用选择器的CSS（#new_customer）。

@media only screen and (min-width : 320px) and (max-width : 480px) {
    #new_customer {margin-left: 14% !important; }
}
@media only screen and (min-width : 481px) and (max-width : 595px) {
    #new_customer {background: blue; margin-left: 14% !important; }
}
@media only screen and (min-width : 596px) and (max-width : 690px) {
    #new_customer {background: red; margin-left: 0%  !important; }
}
@media only screen and (min-width : 691px) and (max-width : 800px) {
    #new_customer {background: orange; margin-left:-50%  !important; }
}
@media only screen and (min-width : 801px) and (max-width : 1199px) {
    #new_customer {background: black; margin-left:-30% !important; }
}

这是我的home_controller，包含两种形式

class HomeController < ApplicationController
  def index
    @customer=Customer.new
  end

  def services
  end

  def testimonials
  end

  def contact
    @customer=Customer.new
  end
end

以下是实际的customers\_form.html.erb

<%= form_for @customer, :html => { :class => 'form-horizontal' } do |f| %>
  <div class="control-group">
    <%= f.label :cust_fname,'First Name', :class => 'control-label' %>
    <div class="controls">
      <%= f.text_field :cust_fname, :class => 'text_field' %>
    </div>
  </div>
  <div class="control-group">
    <%= f.label :cust_lname,'Last Name', :class => 'control-label' %>
    <div class="controls">
      <%= f.text_field :cust_lname, :class => 'text_field' %>
    </div>
  </div>
  <div class="control-group">
    <%= f.label :cust_phone,'Phone', :class => 'control-label' %>
    <div class="controls">
      <%= f.text_field :cust_phone, :class => 'text_field' %>
    </div>
  </div>
  <div class="control-group">
    <%= f.label :cust_email,'Email', :class => 'control-label' %>
    <div class="controls">
      <%= f.text_field :cust_email, :class => 'text_field' %>
    </div>
  </div>
  <div class="control-group">
    <%= f.label :cust_address,'Address', :class => 'control-label' %>
    <div class="controls">
      <%= f.text_field :cust_address, :class => 'text_field' %>
    </div>
  </div>
  <div class="control-group">
    <%= f.label :cust_city,'City', :class => 'control-label' %>
    <div class="controls">
      <%= f.text_field :cust_city, :class => 'text_field' %>
    </div>
  </div>
  <div class="control-group">
    <%= f.label :cust_state,'State', :class => 'control-label' %>
    <div class="controls">
      <%= f.select :cust_state, [['Illinois','Illinois'],
          ['Indiana','Indiana'],
         ] %>
    </div>
  </div>
  <div class="control-group">
    <%= f.label :cust_zip,'Zip', :class => 'control-label' %>
    <div class="controls">
      <%= f.text_field :cust_zip, :class => 'text_field' %>
    </div>
  </div>
  <div class="control-group">
    <%= f.label :cust_property, 'Type', :class => 'control-label' %>
    <div class="controls">
      <%= f.radio_button :cust_property,'Residential', :class => 'radio_button' %> Residential
      <%= f.radio_button :cust_property,'Commercial', :class => 'radio_button' %> Commercial
    </div>
  </div>
  <div class="control-group">
    <%= f.label :cust_notes, :class => 'control-label' %>
    <div class="controls">
      <%= f.text_area :cust_notes, :class => 'text_area' %>
    </div>
  </div>

  <div class="cust_button">
    <%= f.submit "Send", :class => 'btn btn-primary',:style => 'position:absolute; right:600px' %>

  </div>
<% end %>

以下是layouts._indexform.html.erb

中的精简版

<%= form_for @customer, :html => { :class => 'form-horizontal',:style =>'margin-left:-13%'} do |f| %>
    <fieldset>
        <div class="control-group">

        <div class="controls">
          <%= f.text_field :cust_fname, :class => 'text_field', :placeholder =>"First Name" %>
        </div>
        </div>
        <div class="control-group">

        <div class="controls">
          <%= f.text_field :cust_lname, :class => 'text_field', :placeholder =>"Last Name" %>
        </div>
        </div>
        <div class="control-group">

        <div class="controls">
          <%= f.text_field :cust_phone, :class => 'text_field', :placeholder =>"Phone" %>
        </div>
        </div>
        <div class="control-group">

        <div class="controls">
          <%= f.text_field :cust_email, :class => 'text_field', :placeholder =>"Email" %>
        </div>
        </div>

        <div class="control-group">

        <div class="controls">
          <%= f.radio_button :cust_property,'Residential', :class => 'radio_button' %> Residential
          <%= f.radio_button :cust_property,'Commercial', :class => 'radio_button' %> Commercial
        </div>
        </div>
        <div class="control-group">

        <div class="controls">
          <%= f.text_area :cust_notes, :class => 'text_area', :placeholder =>"How can we help ?" %>
        </div>
        </div>

        <div class="">
        <%= f.submit "Send", :class => 'btn btn-primary',:style => "background:green; margin-left:50%" %>

        </div>
    </fieldset>
<% end %>

Answer 1

我通过将CSS应用于包含压缩形式的<div>标记来实现它。

我为<div>代码class =test <div class=test >提供了.test。然后我将媒体查询应用到bootstrap_and_overrides.css文件中的@media only screen and (min-width : 320px) and (max-width : 480px) { .test {margin-left: 25% !important; } .cust_button {right: 25% !important; } } @media only screen and (min-width : 481px) and (max-width : 595px) { .test {background: blue; margin-left: 14% !important; } .cust_button {right: 25% !important; } } @media only screen and (min-width : 596px) and (max-width : 690px) { .test {background: red; margin-left: 10% !important; } .cust_button {position:absolute; margin-right: 15% !important; } } @media only screen and (min-width : 691px) and (max-width : 800px) { .test {background: orange; margin-left:-44% !important; } } @media only screen and (min-width : 801px) and (max-width : 1199px) { .test {background: black; margin-left:-20% !important; }选择器，如下所示

{{1}}

现在它只将CSS应用于表单的特定版本而不是表单的每个实例。

当表单在两个不同的位置呈现时，如何在Rails中向表单添加CSS？

1 个答案: