純CSS無法正確在Ruby on Rails中加載

Question

我正在使用pure.css在Rails應用程序中加載“ _form.html.erb”。

但是，css並不是在設置rails部分的樣式，而是在其下面的常規HTML樣式。 注意：我添加了以下HTML，以確保CSS正常工作。

這是_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>

這是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";

我有資產/組件/ css中所需的“ grid-sensitive-min.css”和“ pure-min.css”

我認為這可能是Rails語法問題，但我不確定。 我確定這是我所缺少的簡單事物。

Answer 1

您可以使用以下方法將CSS類應用於form_for方法：

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

Answer 2

嘗試更改：

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

至：

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