html - Bootstrap CSS : align two forms buttons

Question

我正在使用 Bootstrap 和 Laravel。

我想将“更新”和“删除”两个按钮并排对齐。

但是删除按钮有自己的路由和字段。所以我创建了两个表单。

当然，删除按钮现在位于更新按钮下方。

问题:如何让它们彼此相邻？

我认为表单中的表单不标准。另外，它实际上会混淆正在发送的字段。

是否有我可以应用的 CSS 规则？

如果您想尝试一下，我创建了一个 JSFiddle:https://jsfiddle.net/0e5jk8yr/

<form method="post" action="/route1">
    <!-- More code here -->
    <div class="form-group">
      <label for="field1" class="required">Field #1</label>
      <input type="text" class="form-control" id="field1" name="field1" value="value">
    </div>
    <button type="submit" class="btn btn-success">Update</button>
</form>
<form method="post" action="/route2">
    <!-- More code here -->
    <button type="submit" class="btn btn-danger">Delete</button>
</form>

如果 CSS 无法实现，请随时评论并建议元素更新/删除的 UI 设计。

感谢所有阅读并试图解决这个问题的人。

旁注:我将其标记为 Laravel，以防有人知道我可以将 Laravel/Blade 用于导致删除的表单的技巧。

如果 CSS 不起作用，一种解决方案是只使用一种形式导致 update()，然后调用 destroy() 方法，如果删除按钮被按下。

Answer 1

方法一

如果你想保持现在的状态，你可以给表单属性 display: inline;。

form {    
    display: inline;
}

<link href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
<form method="post" action="/route1">
    <!-- More code here -->
    <div class="form-group">
      <label for="field1" class="required">Field #1</label>
      <input type="text" class="form-control" id="field1" name="field1" value="value">
    </div>
    <button type="submit" class="btn btn-success">Update</button>
</form>
<form method="post" action="route2" id="form2">
    <!-- More code here -->
    <button type="submit" class="btn btn-danger">Delete</button>
</form>

方法二

然而，拥有两种形式并不是必需的，因为您可以为输入赋予名称属性，然后使用该名称调用函数。因此，当提交表单时，它将返回 $_POST['submit'] 或 $_POST['delete']。

<form method="post" action="/route1">
    <!-- More code here -->
    <div class="form-group">
      <label for="field1" class="required">Field #1</label>
      <input type="text" class="form-control" id="field1" name="field1" value="value">
    </div>
    <button name="submit" type="submit" class="btn btn-success">Update</button>
    <button name="delete" type="submit" class="btn btn-danger">Delete</button>
</form>