堆栈编辑表单与Bootstrap和Rails

Question

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

FORM PARTIAL：

 <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>

  

截图：

正如您所见，表单是内联的。我只是希望表单是堆叠/垂直的。谢谢您的帮助。如果您需要查看更多代码，请与我们联系。

Answer 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。