Rails 设计和简单形式

Question

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

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

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

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

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

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

另外，我用于设置“记住我”字样样式的 CSS 不适用于该文本。

我的领域目前有：

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

我尝试应用的样式位于“设计标签”类中 - 它会更改字体颜色和大小。但它不适用于这个特定的表单元素。它适用于表单中的其他元素并且不会改变边距：

.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;};

}

有谁知道如何将“记住我”字样移到复选框的左侧（而不是复选框下方的“R”）？另外，如何将我的字体样式应用于“记住我”这个词？

整个新的会话形式是：

<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; 样式添加到它们两者。您可以使用 deviselabels 类来设置您想要的文本样式。

编辑：

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

话虽这么说，还有另一种方法可以实现这一目标，虽然不是那么“干净”，IMO。你可以给check_box 样式position: absolute 并使用top 样式（即top: 20px）。您可能必须为父元素指定样式 position: relative 才能使其工作。正如我所说，不是那么干净，但它确实有效。