Laravel環位置

-1

怎樣纔可以有諸如以下laravel 5.4Laravel環位置

這是目前我的循環圖像我的帖子位置：

@foreach ($posts as $post) 
    <div class="card"> 
     <header class="card-header"> 
      <p class="card-header-title"> 
       <a href="{{ route('frontshow', $post->slug) }}">{{ $post->title }}</a> 
      </p> 
      <a class="card-header-icon"> 
       <span class="icon"> 
        <i class="fa fa-angle-down"></i> 
       </span> 
      </a> 
     </header> 
     <div class="card-content"> 
      <div class="content"> 
       {{ str_limit($post->body, 100) }} 
      </div> 
     </div> 
    </div> 
@endforeach

我希望我的帖子是這樣left-rightright-left並繼續。

來源

2017-07-25 Robert Nicjoo

您將使用css。 – aldrin27

@ aldrin27我不這麼認爲！ CSS來自bootstrap本身，但在這種情況下，我認爲我需要使用集體，但不知道如何！這就是爲什麼我在這裏問。 –

迭代通過與像$i計數器變量每一個項目，然後檢查

$className = $i % 2 === 0 ? 'left-right' : 'right-left';

結果，將設置適當的類。

瞭解更多關於Modulo運算符從PHP Manual。

在刀片方面，它可以像：

@foreach ($items as $i => $item) 
    @if ($i % 2 == 0) 
    // left-right 
    @else 
    // right-left 
    @endif 
@endforeach

來源

2017-07-25 05:28:25 slick

你知道有一個$循環var內的刀片循環，可以是有用的:) –

你可以使用一個條件你這樣的循環中：

@if $loop->index %2 == 0 
// add a css class for even element like 'left-right' 
@else 
// add the other css class 'right-left' 
@endif

來源

2017-07-25 05:29:49

我試過這個，但它顯示了相同的@ @@@@（$職位爲$職位） @if（$職位 - >索引％2 == 0 ）

@else

@endif @ endforeach' –

http://imgur.com/a/thDUB它應該是在左側和名稱第二個鏈接權 –

嘿，它是$ loop-> index不是$ post，它是一個刀片循環變量 –

可以使用CSS3實際上做的伎倆：下面是一個例如

.card { 
 
    display: flex; 
 
} 
 

 
.card + .card { 
 
    margin-top: 10px; 
 
} 
 

 
.card .card-header { 
 
    height: 100px; 
 
    width: 50%; 
 
    background: grey; 
 
} 
 

 
.card:nth-child(even) .card-header { 
 
order: 1 
 
}

<div class="cards"> 
 
    <div class="card"> 
 
    <header class="card-header"> 
 
     <p class="card-header-title"> 
 
     <a href="{{ route('frontshow', $post->slug) }}">Post Title 1</a> 
 
     </p> 
 
     <a class="card-header-icon"> 
 
     <span class="icon"> 
 
        <i class="fa fa-angle-down"></i> 
 
       </span> 
 
     </a> 
 
    </header> 
 
    <div class="card-content"> 
 
     <div class="content"> 
 
     Content goes here 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="card"> 
 
    <header class="card-header"> 
 
     <p class="card-header-title"> 
 
     <a href="{{ route('frontshow', $post->slug) }}">Post Title 2</a> 
 
     </p> 
 
     <a class="card-header-icon"> 
 
     <span class="icon"> 
 
        <i class="fa fa-angle-down"></i> 
 
       </span> 
 
     </a> 
 
    </header> 
 
    <div class="card-content"> 
 
     <div class="content"> 
 
     Content goes here 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="card"> 
 
    <header class="card-header"> 
 
     <p class="card-header-title"> 
 
     <a href="{{ route('frontshow', $post->slug) }}">Post Title 3</a> 
 
     </p> 
 
     <a class="card-header-icon"> 
 
     <span class="icon"> 
 
        <i class="fa fa-angle-down"></i> 
 
       </span> 
 
     </a> 
 
    </header> 
 
    <div class="card-content"> 
 
     <div class="content"> 
 
     Content goes here 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-07-25 07:33:54 elegisandi

回答

相關問題