如何让Rails局部视图中的提交按钮与父视图取消按钮同行显示

这个场景我之前也碰到过，确实有点头疼——表单逻辑复用在局部，但取消按钮的跳转链接随父视图变化，没法直接塞到局部里。不过有几个很实用的方案可以解决按钮并排的需求，我给你详细说说：

方案1：用content_for传递取消按钮到局部表单 #

这种方法能保持表单的完整性，同时让取消按钮动态来自父视图：

首先修改你的局部表单（比如app/views/models/_form.html.erb），在提交按钮旁边预留一个渲染取消按钮的位置：

<%= form_with(model: @model) do |form| %>
  <!-- 这里是你的表单字段，示例如下 -->
  <div class="field">
    <%= form.label :name %>
    <%= form.text_field :name %>
  </div>

  <!-- 按钮组容器，用来让按钮并排 -->
  <div class="form-actions">
    <%= form.submit @model.new_record? ? "创建" : "更新", class: "btn btn-primary" %>
    <!-- 渲染父视图传递的取消按钮 -->
    <%= yield :cancel_button %>
  </div>
<% end %>

然后在new.html.erb里，先定义取消按钮的内容，再渲染局部表单：

<%# 把取消按钮的内容传递给局部的cancel_button区块 %>
<% content_for :cancel_button do %>
  <%= link_to "取消", models_path, class: "btn btn-secondary" %>
<% end %>

<%= render "form" %>

对应的edit.html.erb里：

<% content_for :cancel_button do %>
  <%= link_to "取消", model_path(@model), class: "btn btn-secondary" %>
<% end %>

<%= render "form" %>

最后加一点CSS让按钮并排（可以放在你的application.css或者对应的scss文件里）：

.form-actions {
  display: flex;
  gap: 10px; /* 控制按钮之间的间距 */
  margin-top: 15px;
}

方案2：拆分表单为「字段局部」+ 父视图包裹表单 #

如果觉得content_for有点绕，也可以把表单拆成两部分：只包含字段的局部，和父视图里的表单包裹+按钮组。

先创建一个只放字段的局部app/views/models/_form_fields.html.erb：

<!-- 这里只有表单字段，没有提交按钮和form标签 -->
<div class="field">
  <%= form.label :name %>
  <%= form.text_field :name %>
</div>
<!-- 其他字段... -->

然后在new.html.erb里自己写form标签，渲染字段局部，再放按钮组：

<%= form_with(model: @model) do |form| %>
  <%= render "form_fields", form: form %>

  <div class="form-actions">
    <%= form.submit "创建", class: "btn btn-primary" %>
    <%= link_to "取消", models_path, class: "btn btn-secondary" %>
  </div>
<% end %>

edit.html.erb同理：

<%= form_with(model: @model) do |form| %>
  <%= render "form_fields", form: form %>

  <div class="form-actions">
    <%= form.submit "更新", class: "btn btn-primary" %>
    <%= link_to "取消", model_path(@model), class: "btn btn-secondary" %>
  </div>
<% end %>

同样用之前的form-actions CSS来实现按钮并排，这种方法结构更直观，适合不想用content_for的场景。

不推荐的方案：外部按钮强行对齐 #

有人会尝试把取消按钮放在表单外面，然后用CSS的margin或者定位来和提交按钮对齐，但这种方法很脆弱——如果表单或者按钮的样式变化，对齐很容易失效，而且响应式场景下容易出问题，所以尽量不用。

这两种方案都能完美解决你的需求，选哪个看你更习惯哪种写法～

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