Bootstrap CSS：对齐两个表单按钮

我正在使用引导程序和Laravel。Bootstrap CSS：对齐两个表单按钮

我想对齐的两个按钮“更新”和“删除”彼此相邻。

但是删除按钮有它自己的路线和字段。所以我创造了两种形式。

当然，删除按钮现在低于更新按钮。

问：我该如何让它们彼此相邻？

我觉得形式的内部形式不规范。另外，它实际上与发送的字段混淆。

是我可以申请这个工作有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，随意评论，并提出项目更新/删除用户界面设计。

感谢大家阅读，并试图弄清楚这一点。

附注：我把这个标记为Laravel，以防有人知道我可以使用Laravel/Blade的技巧来导致删除。

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

来源

2017-04-26 Jachinair

有没有工作laravel，但我敢肯定，你不必为两个单独的行动做两种形式。您可以通过命名按钮来完成此操作。你可以检查这个链接。 http://stackoverflow.com/questions/39205820/laravel-5-1-one-form-two-submit-buttons – Amir

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

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

来源

2017-04-26 18:31:42 RBCunhaDesign

试试这个。

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

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

来源

2017-04-26 18:04:30 Nimish

或者这样：

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

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

来源

2017-04-26 18:09:12

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

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

来源

2017-04-26 18:09:34

Bootstrap CSS：对齐两个表单按钮

回答

相关问题