2016-05-27 15 views
0

私のレールアプリで "_form.html.erb"を読み込むためにpure.cssを使用しています。Ruby on Railsで純粋なCSSがロードされていません

しかしCSSはレール部分をスタイリングしていませんが、私の下にある通常のHTMLをスタイルします。 注: CSSが正しく機能するように、以下のHTMLを追加しました。ここで

は、私は、 "グリッド応答-min.css" を持ってapplication.scssファイル

 *= require_tree . 
    *= require_self 
    *= require datatables.net-bs/css/dataTables.bootstrap.min 
    *= require css/pure-min.css 
    *= require css/grids-responsive-min.css 
    */ 
    @import "bootstrap-sprockets"; 
    @import "bootstrap"; 
    @import "AdminLTE/AdminLTE"; 
    @import "AdminLTE/skins/skin-blue"; 

_forms.html.erbファイルここ

<%=f orm_for(@client) do |f| %> 
<% if @client.errors.any? %> 
    <div id="error_explanation"> 
     <h2><%= pluralize(@client.errors.count, "error") %> prohibited this client from being saved:</h2> 

     <ul> 
      <% @client.errors.full_messages.each do |message| %> 
       <li> 
        <%=m essage %> 
       </li> 
       <% end %> 
     </ul> 
    </div> 
    <% end %> 
     <!-- beginning of rails code --> 
     <form class="pure-form pure-form-stacked"> 
      <fieldset> 
       <legend>Legend</legend> 
       <div class="pure-g"> 
        <div class="pure-u-1 pure-u-md-1-3"> 
         <%=f .label:firstName %> 
          <br> 
          <%=f .text_field :firstName %> 
        </div> 
       </div> 

      </fieldset> 
     </form> 

     <div class="actions"> 
      <%=f .submit class: "btn btn-primary" %> 
     </div> 
     <% end %> 
      <!-- end of rails code --> 
      <!-- Begining of HTML code --> 
      <form class="pure-form pure-form-stacked"> 
       <fieldset> 
        <legend>Legend</legend> 

        <div class="pure-g"> 
         <div class="pure-u-1 pure-u-md-1-3"> 
          <label for="first-name">First Name</label> 
          <input id="first-name" class="pure-u-23-24" type="text"> 
         </div> 

         <div class="pure-u-1 pure-u-md-1-3"> 
          <label for="last-name">Last Name</label> 
          <input id="last-name" class="pure-u-23-24" type="text"> 
         </div> 

         <div class="pure-u-1 pure-u-md-1-3"> 
          <label for="email">E-Mail</label> 
          <input id="email" class="pure-u-23-24" type="email" required> 
         </div> 

         <div class="pure-u-1 pure-u-md-1-3"> 
          <label for="city">City</label> 
          <input id="city" class="pure-u-23-24" type="text"> 
         </div> 

         <div class="pure-u-1 pure-u-md-1-3"> 
          <label for="state">State</label> 
          <select id="state" class="pure-input-1-2"> 
           <option>AL</option> 
           <option>CA</option> 
           <option>IL</option> 
          </select> 
         </div> 
        </div> 

        <label for="terms" class="pure-checkbox"> 
         <input id="terms" type="checkbox"> I've read the terms and conditions 
        </label> 

        <button type="submit" class="pure-button pure-button-primary">Submit</button> 
       </fieldset> 
      </form> 

の一例です「pure-min.css」はアセット/コンポーネント/ CSSに必要です

私はそれが可能かもしれないと思っていますレール構文の問題ですが、わかりません。私はそれが私が行方不明の単純なものだと確信しています。

+1

、あなたのフォームにpure.cssクラスを追加するだけですか?もしそうなら、 '%% form_for(@client、html:{class: '純粋形純粋な積み重ねた'}))do | f |%>' – Shaun

+0

@Shaun changing '<%= form_for(@client、html:{class: "pure-form-pure-form-stacked"})do | f |%> 'は問題を修正しました。 –

答えて

1

あなたがしてform_forメソッドにCSSクラスを適用することができます:私はあなたの質問を理解していない

<%= form_for(@client, html: { class: 'pure-form pure-form-stacked' }) do |f| %> 
0

は変更してみてください:

<%=form_for(@client) do |f| %> 

へ:

<%=bootstrap_form_for(@client) do |f| %> 
関連する問題