So fügen Sie die Formularschaltfläche zur Karte hinzu

Question

Ich möchte ein card-link zu meinem Bootstrap card hinzufügen, aber dieser Link muss eine DELETE Anfrage sein (für meine Ressource-Controller).

Ich bin mir bewusst, dass ich JavaScript verwenden könnte, um meine Probleme zu lösen, aber ich möchte stattdessen ein Formular verwenden, um zu übermitteln.

Ich habe versucht, zur Zeit wie folgt zusammen:

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

der Link Bearbeiten sehr gut macht (als Schaltfläche), aber die Löschtaste macht nicht als card-link.

Also meine Frage, wie kann ich setzen nicht-get-Anfrage Links innerhalb Links Bootstrap-Karte.

Answer 1

Teil des Problems ist, wie Bootstrap (und Browser) die <button> Tag und <form> im Allgemeinen behandeln. Es gibt jedoch einige strukturelle Änderungen, die dazu beitragen, dies zu umgehen, wobei die erste die grundlegenden <form> Elemente außerhalb von .card-block verschiebt.

Von dort werden wir einige .btn bezogene Klassen auf Ihre <button> anwenden, um ihr grundlegendes Styling zu entfernen: .btn-link funktioniert gut hier.

Das einzige, was fehlt ist, dass die <button> wird nicht standardmäßig auf einen Zeiger-Cursor, so dass Sie sicherstellen möchten, dass dies für UI/UX Bedenken angeht.

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