Rails 设计简单的表格

Question

我正在尝试用 Rails 4 设计和简单的形式制作一个应用程序。

设计视图有一个标准的记住我复选框，我正在尝试对其进行格式化。

我读了一篇博客 post 向我展示了如何更改记住我字段的设计复选框对齐方式（作为标准，它会将复选框推到表单中其他字段的垂直对齐方式的左侧.

为了解决这个问题，我将 framework_and_overrides.css.scss 更改为包括：

.checkbox input[type="checkbox"] {
  margin-left: 0;
}

现在，当我尝试使用设计表单时，复选框出现在记住我标签中字母 'R' 的顶部。

此外，我的 css 样式词 'remember me' 不适用于该文本。

我的领域目前有：

        <%= f.input :remember_me,  as: :boolean,  inline_label: true, :input_html => {:class => 'deviselabels'}, label: false if devise_mapping.rememberable? %>

我尝试应用的样式位于 'devise labels' class - 它会更改字体颜色和大小。但它不适用于这个特定的表单元素。它适用于表单中的其他元素并且不会改变边距：

.deviselinks {
  font-family: 'Quicksand', sans-serif;
  color: white;
    a:link {text-decoration:none; background-color:transparent; color:white;};
    a:visited {text-decoration:none;background-color:transparent; color:white;};
    a:hover {text-decoration:none;background-color:transparent; color:white;};
    a:active {text-decoration:none;background-color:transparent; color:white;};

}

有谁知道如何将单词 'remember me' 移动到复选框的左侧（而不是 'R' 在复选框下方）？另外，如何将我的字体样式应用到单词 'Remember me'?

整个新的会话形式是：

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6 col-md-offset-3">

      <div class="devisetitle">Welcome back</div>
    </div>

  <%= simple_form_for(resource, as: resource_name, :html => {:id => "sign_in_user"}, url: session_path(resource_name)) do |f| %>


      <div class="row">
        <div class="col-md-3 col-md-offset-3">
          <div class="row">
            <div class="col-md-12">


              <%- if devise_mapping.omniauthable? %>

                  <div class="facebookauth">
                    <%= link_to "Login with Facebook", user_omniauth_authorize_path(:facebook) %>
                  </div>

              <% end -%>

            </div>
          </div>

          <div class="row">
            <div class="col-md-12">


              <%- if devise_mapping.omniauthable? %>

                  <div class="googleauth">
                    <%= link_to "Login with Google", user_omniauth_authorize_path(:google_oauth2) %>
                  </div>

              <% end -%>

            </div>
          </div>


          <div class="row">
            <div class="col-md-12">

              <%- if devise_mapping.omniauthable? %>
                  <div class="linkedinauth">
                    <%= link_to "Login with LinkedIn", user_omniauth_authorize_path(:linkedin) %>
                  </div>

              <% end -%>


            </div>
          </div>
        </div>




        <div class="col-md-5">
          <div class="emailform">
            <div class="form-inputs", style="margin-left: 7%">


              <%= devise_error_messages! %>


                <%= f.input :email, :label_html => {:class => 'deviselabels'}, placeholder: 'Enter email',  autofocus: true, :input_html => {:maxlength => 25, :size => 40, class: 'lineitemdevise'} %>
                <%= f.input :password, :label_html => {:class => 'deviselabels'},  placeholder: 'At least 8 characters', :input_html => {:maxlength => 15, :size => 40, class: 'lineitemdevise'} %>

                <%= f.input :remember_me,  as: :boolean,  inline_label: true, :input_html => {:class => 'deviselabels'}, label: false if devise_mapping.rememberable? %>

           </div>

            <div class="form-actions">
              <%= f.button :submit, "Login", :class => "dcpb" %>
            </div>
  <% end %>

  </div>


  </div>



  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      <div class="loginredirect">
        <%= render "devise/shared/links" %>
      </div>
    </div>
  </div>
  </div>
</div>

Answer 1

您可以将标签文本移动到单独的标签中。类似于：

<% if devise_mapping.rememberable? %>
  <%= f.label :remember_me, "Remember Me", class: 'deviselabels' %>
  <%= f.check_box :remember_me %>
<% end %>

这将使 check_box 出现在 label 之后。要使 check_box 出现在下方，只需在它们之间添加一个 <br/> 或为它们添加 display: block; 样式。您可以使用 class deviselabels 来设置文本的样式。

编辑：

So Simple Form 是一种使构建表单更容易的工具。你的一行代码相当于我上面的四行代码，除了 label 和 check_box 被翻转。这样做的原因是这是显示 label/checkbox 组合（复选框然后标签）的常规方式。

话虽这么说，但还有另一种方法可以实现这一点，尽管不是 "clean"，IMO。您可以给 check_box 样式 position: absolute 并使用 top 样式（即 top: 20px）。您可能必须为父元素提供样式 position: relative 才能使其正常工作。正如我所说，没有那么干净，但它确实有效。

Rails 设计简单的表格

Rails Devise & Simple Form

html

css

ruby-on-rails

devise

simple-form