如何让Rails Bootstrap表单的邮箱标签与输入框同行显示？

要实现标签和输入框同行显示，核心是利用bootstrap_form gem支持的水平布局（horizontal layout），它基于Bootstrap的栅格系统分配标签与输入框的列宽，以下提供两种实现方式：

方式1：仅针对邮箱字段设置水平布局 #

在email_field中添加layout: :horizontal参数，同时通过label_col和control_col指定标签与输入框的栅格列宽度：

<%= bootstrap_form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>

  <div class="field ">
    <%= f.email_field :email, label_class: "text-light lead", layout: :horizontal, label_col: "col-md-3", control_col: "col-md-9" %>
  </div>

  <div class="field">
    <%= f.password_field :password, autocomplete: "new-password", help: 'A good password should be at least six characters long', label_class: "text-light lead" %>
  </div>

  <div class="field">
    <%= f.password_field :password_confirmation, autocomplete: "new-password", label_class: "text-light lead" %>
  </div>

  <div class="actions">
    <%= f.submit "Sign up" %>
  </div>
<% end %>

方式2：给整个表单设置水平布局（所有字段标签均同行） #

如果希望所有表单字段的标签都和输入框同行，可直接在bootstrap_form_for中设置全局水平布局，并统一配置列宽：

<%= bootstrap_form_for(resource, as: resource_name, url: registration_path(resource_name), layout: :horizontal, label_col: "col-md-3", control_col: "col-md-9") do |f| %>

  <div class="field ">
    <%= f.email_field :email, label_class: "text-light lead" %>
  </div>

  <div class="field">
    <%= f.password_field :password, autocomplete: "new-password", help: 'A good password should be at least six characters long', label_class: "text-light lead" %>
  </div>

  <div class="field">
    <%= f.password_field :password_confirmation, autocomplete: "new-password", label_class: "text-light lead" %>
  </div>

  <div class="actions">
    <%= f.submit "Sign up" %>
  </div>
<% end %>

补充说明 #

• label_col和control_col的列宽值可根据页面布局调整，比如col-sm-4和col-sm-8，适配不同屏幕尺寸；
• 水平布局会自动将标签和输入框放入Bootstrap的.row及对应列容器中，实现同行排列。

内容的提问来源于stack exchange，提问作者James