그리드를 제대로 순환시키는 방법은 무엇입니까?

나는 현재 포토 갤러리 인덱스 작업을하고 있습니다.그리드를 제대로 순환시키는 방법은 무엇입니까?

내 루프가 4 개의 열을 모두 반복하여 새 행을 만들 수 있도록하려면 어떻게해야합니까? 당신이 상상할 수있는, 그것은 다음과 같이 표시됩니다 이제

<div class="row"> 

    @foreach($photoGalleries as $photoGallery) 

     <div class="col-md-3"> 
      <a href="{{ url('/photogalleries/' . $photoGallery->id) }}"> 
       <img class="img-fluid" style="height: 200px; width: 200px;" src="/images/{{ $photoGallery->cover_image }}"> 
      </a> 
      <h3>{{ $photoGallery->name }}</h3> 
     </div> 

    @endforeach 

</div>

이

내 코드입니다

대체 솔루션 :

하는 margin- 추가 col-md-3 속성 다음에 가기 :

<div class="col-md-3" style="margin-top: 20px;"> 
</div>

출처

2017-02-03 Anonymous

은'''COL-MD-3'''tag 이전, 이미지와 유사한 레이아웃을 생성해야 코드를 –

나는 현재 (반복) 반복하고 당신의 질문을 이해 할 수 없습니다 위의 그림 (및 코드)에서 볼 수 있습니다. 이제 4 번째 사진 이후에는 휴식이 없습니다. 4 열, * 새 행 * (휴식) 반복하고 그 과정을 반복하고 싶습니다. 행 앞에서 루프를 추가하면 4 개의 열을 사진으로 채우지 않고 매번 행을 만들 수 있습니다. –

내 지식에 따르면 두 가지 옵션이 있습니다. 첫 번째 : 4 개의 항목을 가진 콜렉션 컬렉션을 수집하고 두 개의 foreach 루프를 사용하여 반복 할 수 있습니다. 두 번째 : 키 + 1을 4로 나눌 때 나머지 0을 확인하고 div.row를 추가하십시오 –

$collectionOne = $photoGalleries->chunk(4); 


@foreach($collectionOne as $collectionTwo) 
    <div class "row" > 
     @foreach($collectionTwo as $photoGallery) 
      <div class="col-md-3"> 
       <a href="">...... </a> 
      </div> 
     @endforeah 
    </div> 
@endforeach

출처

2017-02-04 10:30:57

그리드를 제대로 순환시키는 방법은 무엇입니까?

답변

관련 문제