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

Laravel环位置

回答

相关问题