如何将表单按钮添加到卡片

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>