如何將表單按鈕添加到卡片

Question

我想向我的引導card添加card-link，但此鏈接需要爲DELETE請求（用於我的資源控制器）。

我知道我可以使用JavaScript來解決我的問題，但我想改爲使用表單來提交。

我現在已經嘗試了以下內容：

<div class="card"> 
    <img class="card-img-top" src="{{$site->cover}}" style="width: 100%;"> 
    <div class="card-block"> 
     <h4 class="card-title">{{$site->title}}</h4> 
     <p class="card-text">{{str_limit($site->description, 300)}}</p> 
    </div> 
    <div class="card-block text-right"> 
     <a href="#" class="card-link text-primary">Edit</a> 
     <form method="POST" action="{{route('admin.site.destroy', ['site' => $site])}}"> 
      <input type="hidden" name="_method" value="DELETE"> 
      <input type="hidden" name="_token" value="{{ csrf_token() }}"> 
      <button type="submit" class="card-link text-danger">Delete</button> 
     </form> 
    </div> 
</div> 

編輯鏈接呈現非常清楚（按鈕），但刪除按鈕不會呈現爲card-link。

所以我的問題，我怎麼把裏面的引導卡鏈接非得到請求鏈接。

Answer 1

問題的一部分是Bootstrap（和瀏覽器）如何處理<button>標記和<form>。有些結構變化可以幫助繞過這一點，其中第一個將基本<form>元素移動到.card-block之外。

從那裏我們打算將一些.btn相關類應用到您的<button>以刪除其基本樣式：.btn-link在這裏很好地工作。

唯一缺少的是<button>不會默認爲指針遊標，因此您需要確保解決UI/UX問題。對於`method`是`得到

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="card"> 
 
\t <form method="POST" action="{{route('admin.site.destroy', ['site' => $site])}}" class="pull-right"> 
 
\t <input type="hidden" name="_method" value="DELETE"> 
 
\t <input type="hidden" name="_token" value="{{ csrf_token() }}"> 
 

 
    <img class="card-img-top" src="http://placehold.it/350x150" width="100%" /> 
 
    
 
    <div class="card-block"> 
 
\t \t <h4 class="card-title">{{$site->title}}</h4> 
 
\t \t <p class="card-text">{{str_limit($site->description, 300)}}</p> 
 
    </div> 
 

 
\t <div class="card-block text-right"> 
 
\t \t <a href="#" class="card-link text-primary">Edit</a> 
 
\t \t <button type="submit" class="card-link btn-link text-danger">Delete</button> 
 
    </div> 
 

 
\t </form> 
 
</div>