如何将表单按钮添加到卡

Question

我想在我的Bootstrap card-link中添加card，但此链接需要是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。

所以我的问题是，如何将非get-request链接放在bootstrap卡链接中。

Answer 1

部分问题是Bootstrap（和浏览器）如何处理<button>标记和<form>。虽然有一些结构上的变化有助于绕过这一点，但第一个变化是将基本<form>元素移到.card-block之外。

从那里开始，我们会将.btn个相关课程应用到您的<button>以删除其基本样式：.btn-link在这里运作良好。

唯一缺少的是<button>默认为指针光标，因此您需要确保解决UI / UX问题。

＆＃13;

＆＃13;

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

    <img class="card-img-top" src="http://placehold.it/350x150" 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>
		<button type="submit" class="card-link btn-link text-danger">Delete</button>
    </div>

	</form>
</div>

＆＃13;

＆＃13;

＆＃13;