Question

尝试更改移动设备的Bootstraps列顺序，.col-order无法正常工作，从而导致其循环。设置了$ loop-> iteration来在台式机的第1、4或5列上显示不同的背景，但是对于移动设备，我需要某种方式将它们显示为奇数或偶数，谢谢。

<div class="row no-gutters bg-light">
     @foreach ($products as $product)
     <div class="col-12 col-xl-6 div-wo-bg @if($loop->iteration === 1 || $loop->iteration === 4 || $loop->iteration === 5) div-w-bg @endif">

尝试了if语句：

<div class="row no-gutters bg-light">
     @foreach ($products as $product)
         @if ('className' == 'col-12')
            <div class="col-12 col-xl-6 div-wo-bg @if($loop->iteration === 1 || $loop->iteration === 4 || $loop->iteration === 5) div-w-bg @endif">
         @elseif ('className' == 'col-xl-6')
            <div class="col-12 col-xl-6 div-wo-bg @if($loop->odd) div-w-bg @endif">
         @endif

这只会使所有列显示不合理（对于移动设备和台式机而言）。

Answer 1

尝试一下

<div class="row no-gutters bg-light">
   @foreach ($products as $key => $product)
   <div class="col-12 col-xl-6 div-wo-bg {{ $key == 1 ? 'div-w-bg' : ($key == 4 ? 'div-w-bg' : ( $key == 5 ? 'div-w-bg' )) }}">

Answer 2

<!-- Latest Products Showcase Section 

         - The showcase design calls for columns to be side by side for desktop, but stacked for mobile. There are 2 differently styled   bg's repeated throughout the layout of the columns.

         - Because these columns are layed out differently, they both require 2 different $loop extensions to retrieve the bg's. So       from within an if statement we use $loop->iteration for desktop but $loop->odd for mobile -->

    <!-- Desktop Layout -->
        <div class="container-fluid p-0">
            <div class="row showcase-shop-products no-gutters bg-light">
                @foreach ($products as $product)
                    <div class="col-6 d-none d-lg-flex div-wo-bg @if($loop->iteration === 1 || $loop->iteration === 4 || $loop->iteration === 5) div-w-bg @endif">
                        <div class="container-fluid">
                            <div class="row">

                                <!-- Column a (Text) --> 
                                <div class="col-6 showcase-col">
                                    <div class="overlay"></div>
                                    <div class="showcase-hero">
                                        <h2 class="card-title mb-4"><a href="{{ route("shop.show", $product->slug) }}">{{ $product->name }}</a></h2>
                                        <h3 class="card-subtitle text-muted">{{ $product->details }}</h3>
                                        <h4 class="mb-3">{{ $product->presentPrice() }}</h4>
                                        <p class="card-text mb-4 d-lg-none d-xxl-block">Lorem ipsum dolor sit amet consectetur adipisicing elit. At dicta accusamus quia aliquid minima animi alias.</p>
                                        <a href="#" class="btn btn-primary rounded" role="button">Add to Cart</a>
                                    </div>
                                </div>

                                <!-- Column b (Image) -->
                                <div class="col-6 showcase-col">
                                    <a href="{{ route("shop.show", $product->slug) }}" class="text-center showcase-hero"><img class="card-img-top products-img img-fluid" src="{{ asset("img/shop/products/".$product->slug.".png") }}" alt="Random product item"></a>
                                    <div class="overlay"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach 
            </div>
        </div>   

    <!-- Mobile Layout -->
        <div class="container-fluid p-0">
            <div class="row showcase-shop-products no-gutters bg-light">
                @foreach ($products as $product)
                    <div class="col-12 d-flex d-lg-none div-wo-bg @if($loop->odd) div-w-bg @endif">
                        <div class="container-fluid">
                            <div class="row">

                                <!-- Top Column (Image) -->
                                <div class="col-12 showcase-col">
                                    <a href="{{ route("shop.show", $product->slug) }}" class="text-center showcase-hero pt-3"><img class="card-img-top products-img img-fluid" src="{{ asset("img/shop/products/".$product->slug.".png") }}" alt="Random product item"></a>
                                    <div class="overlay"></div>
                                </div>

                                <!-- Bottom Column (Text) -->
                                <div class="col-12 showcase-col">
                                    <div class="overlay"></div>
                                    <div class="showcase-hero text-center pb-5">
                                        <h2 class="card-title mb-4"><a href="{{ route("shop.show", $product->slug) }}">{{ $product->name }}</a></h2>
                                        <h3 class="card-subtitle text-muted">{{ $product->details }}</h3>
                                        <h4 class="mb-3">{{ $product->presentPrice() }}</h4>
                                        <p class="card-text mb-4 d-none xl-block">Lorem ipsum dolor sit amet consectetur adipisicing elit. At dicta accusamus quia aliquid minima animi alias.</p>
                                        <a href="#" class="btn btn-primary rounded btn-width" role="button">Add to Cart</a>
                                    </div>
                                </div>

                            </div>
                        </div> 
                    </div>
                @endforeach
            </div>
        </div>

现在完美运行。

在循环内更改移动设备的Bootstraps列顺序

2 个答案: