如何将表单按钮添加到卡片
问题描述:
我想向我的引导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
。
所以我的问题,我怎么把里面的引导卡链接非得到请求链接。
答
问题的一部分是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>
唯一有效的属性| POST'。 –
@RobertC抱歉从我身边发生错误,虽然这不会改变布局。 – milo526