在标签和字段之间添加空格答案

【问题标题】：Adding space between labels and fields在标签和字段之间添加空格
【发布时间】：2015-05-04 16:11:00
【问题描述】：

在我的 Rails 应用程序中，登录页面上的字段标签与字段本身太接近，使其看起来局促。我想在它们之间添加空间，但不确定如何。

我安装了带有 simple_form、bootstrap 3 和设计的 Rails 4。

这是我的app/views/devise/sessions/new.html.erb 代码：

<div class="row">
<div class="col-xs-4">
<%= simple_form_for(resource, as: resource_name, url: session_path(resource_name), html: {class: "well"}) do |f| %>

<fieldset>
  <legend>Log in</legend>
<%= f.input :email %>
<%= f.input :password %>

  <% if devise_mapping.rememberable? -%>
    <div class="field">
           <%= f.input :remember_me, as: :boolean %>
         </div>

</fieldset>
  <% end -%>

  <div class="actions">
    <%= f.button :submit, "Log in" %>
  </div>
<% end %>

<%= render "devise/shared/links" %>
</div>

<div class="col-xs-8">
  <h2>Signing in is easy and secure</h2>
</div>
</div>

这里是整个 github 仓库：https://github.com/yamilethmedina/wheels_registration

我一直在查看我的 bootstrap.css 文件，但找不到相关的课程。你觉得我接下来应该怎么做？

【问题讨论】：

标签： ruby-on-rails-4 twitter-bootstrap-3 devise simple-form

【解决方案1】：

您可以在自定义标签后添加自己的带有空格的标签。

<%= f.input :email, label: 'Email  ' %>
<%= f.input :password, label: 'Password  ' %>

或者您可以使用chrome dev tools 之类的工具来检查标签元素以查看class 标签的内容，然后添加一些自定义css。例如.label-class { margin-right: 10px; }

【讨论】：

第一种方法不起作用（在两个单独的浏览器上），即使在重新启动服务器后也是如此。例如，当我检查元素时，它被称为 label.email.optional，我在任何 css 文件中都找不到。
它不在 css 文件中，因为 simple_form 会自动创建它。你需要在css文件中添加label.email, label.password { margin-right: 10px; }
是的，现在可以使用了，谢谢！将其标记为最佳答案。