Row-Klasse in Bootstrap richtig in die foreach-Schleife einbauen

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Tabula_Rasa

Mitglied
12 Mai 2017
262
2
18
Hallo,

in der foreach-Schleife werden Datenbankeinträge aufgelistet. Dabei möchte ich, dass vier Einträge nebeneinander sind und der fünfte in der zweiten Reihe anfängt.

Code:
<h1 style="text-align:center;">Music</h1>
<br>
<div class="row">
@if (count($musics) > 0)
@foreach ($musics as $music)
    <div class="col-md-4">
      <a href="{{$music->link_path}}"><img src="{{$music->pic_path}}" style="width:200px;height:200px;" alt="time"></a>
      <br><br>
    <h3>{{$music->title}}</h3>
    <span style="color:#72a8ff;text-decoration: underline;">{{$music->tag}}</span>

    {!!Form::open(['action' => ['MusicsController@destroy', $music->id], 'method' => 'POST', 'class' => 'float-right'])!!}
       {{Form::hidden('_method', 'Delete')}}
       {{Form::submit('Delete', ['class'=>'btn btn-danger'])}}
    {!!Form::close()!!}
    <a type="button" class="btn" href="/musics/{{$music->id}}/edit" style="float:right;">Edit</a>
  </div>
</div>
@endforeach
@else
<div style="margin:0 auto;">
No music found.
</div>
@endif
Ich benutze das Framework Laravel. Ich frag mich, wie ich die Klassen "row" und "col-md-4" so einbauen kann, dass nach 4 Schleifen der fünfte Eintrag in der 2 Reihe aufgelistet wird.
Hat da jemand eine Idee?
 

Tronjer

Senior HTML'ler
8 Oktober 2010
5.238
483
83
Berlin
Zusätzlich über den Index iterieren. Für die Ermittlung des Restwertes gibt es Modulo.
 

Sentence

Aktives Mitglied
30 Juni 2011
475
46
28
Wenn du mehr als 12 Columns in einer row hast, wrapped bootstrap das doch automatisch. In deinem Fall passen also nur 3 Einträge in eine Reihe und der 4te Eintrag landet in der nächsten Reihe. Da brauchst du nicht so einen Aufwand betreiben.

MfG

//EDIT
für 4 Einträge pro Reihe musst du aus
col-md-4
dann col-md-3 machen
 
Werbung: