html - 纯 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";

我有 assets/components/css 中需要的“grids-responsive-min.css”和“pure-min.css”

我认为这可能是 Rails 语法问题，但我不确定。我确定我缺少的是简单的东西。

Answer 1

您可以将 CSS 类应用于 form_for 方法:

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