Question

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

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

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

要解决此问题，我将framework_and_overrides.css.scss更改为包括：

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

现在，当我尝试使用设计表单时，复选框会出现在字母“R＆＃39; R＆＃39;在记住我的标签。

另外，我用css来设计字样并记住我＆＃39;不会适用于该文本。

我的领域目前有：

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

我试图应用的样式是在＆＃39;设计标签＆＃39; 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;};

}

有谁知道如何移动单词＆＃39;记住我＆＃39;因此它们位于复选框的左侧（而不是复选框下面的“R”）？另外，如何将字体样式应用于单词＆＃39;记住我＆＃39;？

整个新会话表格是：

<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被翻转除外。原因是这是显示标签/复选框组合的常规方式（复选框然后标签）。

话虽如此，还有另一种实现这一目标的方法，尽管不是＆＃34;清洁＆＃34;，IMO。您可以为check_box提供样式position: absolute并使用top样式（即top: 20px）。您可能必须为父元素指定样式position: relative才能使其正常工作。正如我所说，不是很干净，但确实有效。

Rails Devise＆amp;简单的形式

1 个答案: