使用 Bootstrap 和 Rails 堆栈编辑表单答案

【问题标题】：Stack edit form with Bootstrap and Rails使用 Bootstrap 和 Rails 堆栈编辑表单
【发布时间】：2016-07-22 03:39:02
【问题描述】：

我目前有一个 form_for，其中包含姓名、电子邮件和 alert_email。我正在使用表单组类，我试图让表单堆叠而不是内联。应该有一个简单的方法来做到这一点，但我似乎无法弄清楚这一点。为了清楚起见，我将发布代码。

表格部分：

 <div class="form-group">
  <%= form.label "Name:" %>
  <%= form.text_field :name %>

  <%= form.label "Email:" %>
  <%= form.text_field :email %>

  <%= form.label "Alert Email(optional):" %>
  <%= form.text_field :alert_email %>
</div>

编辑视图：

<%= form_for [ :admin, @user ], html: { class: "form-vertical" } do |form| %>
<%= render form %>

<div class="form-actions">
  <%= form.button class: "btn btn-primary" %>
  <%= link_to "Cancel", [:admin, @user], class: "btn" %>
</div>

屏幕截图：

如您所见，表单是内联的。我只是想让表单堆叠/垂直。谢谢您的帮助。如果您需要查看更多代码，请告诉我。

【问题讨论】：

标签： css ruby-on-rails forms twitter-bootstrap

【解决方案1】：

将您的 label 和 input 标签分组为单独的 .form-group 标签，如下所示：

<div class="form-group">
 <%= form.label "Name:" %>
 <%= form.text_field :name %>
</div>

<div class="form-group">
 <%= form.label "Email:" %>
 <%= form.text_field :email %>
</div>

<div class="form-group">
 <%= form.label "Alert Email(optional):" %>
 <%= form.text_field :alert_email %>
</div>

查看this example from the docs。

【讨论】：