用顺风和铁轨固定按钮造型

Question

在rails 7中使用button_to样式时，我遇到了一些小问题。我使用的是顺风，下面的html在图像中生成结果。

<div class="flex">
    <button type="button" class="flex-1 bg-indigo-600 py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
        Download
    </button>
    <button type="button" class="flex-1 ml-3 bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
        Delete
    </button>
</div>
<div class="flex">
    <%= button_to 'Download', some_path(@obj), data: { turbo_confirm: "Are you sure?" }, class: "flex-1 bg-indigo-600 py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" %>
    <%= button_to 'Delete', some_path(@obj), data: { turbo_confirm: "Are you sure?" }, class: "flex-1 ml-3 bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray 50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" %>
</div>

​

​

上面的两个按钮是我想要实现的，但由于某种原因，button_to标记将无法生成这个按钮。这很可能是因为它们生成了表单元素，但是我想知道如何解决这个问题？另外，我还在寻找使用按钮_to而不是link_to的解决方案。

Answer 1

button_to生成一个带有提交按钮的表单。此按钮不是挠曲项目，因为它不再是flex容器的直接子元素。这导致flex-1没有任何效果。

使用表单上的contents类“忽略”它，并使按钮成为一个flex项：

<div class="flex space-x-3">
  <%= button_to "Download", "/path", form_class: "contents", class: "flex-1" %>
  <%= button_to "Delete",   "/path", form_class: "contents", class: "flex-1" %>
</div>

至

或者将flex-1添加到表单中：

<div class="flex space-x-3">
  <%= button_to "Download", "/path", form_class: "flex-1", class: "w-full" %>
  <%= button_to "Delete",   "/path", form_class: "flex-1", class: "w-full" %>
</div>

或者使用grid

<div class="grid grid-cols-2 gap-3">
  <%= button_to "Download", "/path", class: "w-full" %>
  <%= button_to "Delete",   "/path", class: "w-full" %>
</div>

或者把它们混合在一起：

<div class="grid grid-cols-2 gap-3 md:grid-flow-col auto-cols-fr">
  <button type="button"> Download </button>
  <%= button_to "Download", "/path", form_class: "contents" %>
  <%= button_to "Delete",   "/path", form_class: "flex", class: "flex-grow" %>
  <%= button_to "Delete",   "/path", class: "w-full" %>
</div>