Bootstrap CSS：對齊兩個表單按鈕

Question

我正在使用引導程序和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，隨意評論，並提出項目更新/刪除用戶界面設計。

感謝大家閱讀，並試圖弄清楚這一點。

附註：我把這個標記爲Laravel，以防有人知道我可以使用Laravel/Blade的技巧來導致刪除。

如果CSS不起作用，一種解決方案是隻使用一種形式導致update()，然後在按下刪除按鈕時調用destroy()方法。

Answer 1

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

Answer 2

試試這個。

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

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>