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

方法1

如果您想保持现在的状态，可以为表单提供display: inline;的属性。

＆＃13;

form {    
    display: inline;
}

＆＃13;

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

＆＃13;

方法2

但是，没有必要使用两个表单，因为您可以为输入提供name属性，然后使用名称调用函数。因此，当提交表单时，它将返回$_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>

Answer 2

试试这个。

＆＃13;

#form2 {    
    position: absolute;
    top: 74px;
    left: 80px;
}

＆＃13;

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

＆＃13;

Answer 3

或者像这样：

.btn-danger {
  position: absolute;
  top: -33px;
  left: 90px;
 }
form {
  position: relative;
}

https://jsfiddle.net/0e5jk8yr/1/

Answer 4

这是您更正后的代码。请检查

<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>
    <!-- More code here -->
    <button type="submit" class="btn btn-danger">Delete</button>
</form>

Bootstrap CSS：对齐两个表单按钮

4 个答案: