时间戳

首页 > 解决方案 > 在 Tailwind 中创建一个类似于 bootstrap 的网格系统

laravel - 在 Tailwind 中创建一个类似于 bootstrap 的网格系统

问题描述

我在laravel中使用带有刀片模板的TailWind，我怎样才能像在引导程序中一样制作这些卡片，我的意思是一列中的每三个项目：

@section('content')
    <div class="flex justify-center">
        <div class="w-8/12 bg-white p-6 rounded-lg mt-10 ">


                    @forelse($products as $product)

                        <!-- Box -->
                            <div class="md:flex md:justify-center md:space-x-8 md:px-14">
                                <!-- box-1 -->
                                <div class="mt-16 py-4 px-4 bg-whit w-72 bg-white rounded-xl shadow-lg hover:shadow-xl transform hover:scale-110 transition duration-500 mx-auto md:mx-0">
                                    <div class="w-sm">
                                        <img class="w-64" src="{{asset('storage/images/products/'.$product->image)}}" alt="" />
                                        <div class="mt-4 text-green-600 text-center">
                                            <h1 class="text-xl font-bold">{{$product->name}}</h1>
                                            <div class="mt-4 text-gray-600">{{$product->info}}</div>
                                            <div class="mt-4 px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-300 text-green-800">{{$product->category->name}}</div>
                                            <button class="mt-8 mb-4 py-2 px-14 rounded-full bg-green-600 text-white tracking-widest hover:bg-green-500 transition duration-200">MORE</button>
                                        </div>
                                    </div>
                                </div>
                    @empty
                        <h1 class="text-center">There is no Products</h1>

                    @endforelse

                <div>  {{$products->links()}}</div>
            </div>
    </div>
@endsection

标签： laraveltwitter-bootstraplaravel-bladetailwind-cssgrid-system

解决方案

在 Tailwind CSS 中重新创建 Bootstrap 网格系统

<div class="grid grid-cols-12">Your column goes here</div>

您可以点击此链接了解更多详情。https://blog.shortbuzz.in/how-to-create-bootstrap-grid-system-in-tailwindcss

推荐阅读