カードにフォームボタンを追加する方法

Question

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としてレンダリングされません。

だから私の質問は、どのように私は、ブートストラップ・カード・リンク内の非取得要求のリンクを入れてください。

Answer 1

一部の問題は、ブートストラップ（およびブラウザ）が<button>タグと<form>をどのように処理するかです。これを回避するための構造的な変更がいくつかありますが、最初は<form>の要素を.card-blockの外側に移動しています。

そこから<button>に.btnの関連クラスを適用して基本的なスタイルを削除します：.btn-linkはここでうまくいきます。

唯一欠けているのは、<button>がデフォルトのポインタカーソルではないため、UI/UXに関する懸案事項に確実に対処する必要があることです。

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