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

Posted 2023-03-07

【中文标题】在 Tailwind 中创建一个类似于 bootstrap 的网格系统

【英文标题】：make a Grid system like bootstrap in Tailwind

【发布时间】：2021-10-21 19:23:16

【问题描述】：

我在 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)"  />
                                        <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

【问题讨论】：

你看到Tailwind Components上的卡片组件了吗？

知道了，谢谢，工作

【参考方案1】：

这是 Peppermintology 以答案形式发表的评论：

听起来您正在寻找 3 列网格。要在 Tailwind CSS 中做到这一点，请使用如下网格类：

<div class="grid grid-cols-3">
   <!--- Generated cards go here --->
</div>

【参考方案2】：

在 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

【讨论】：

在发布链接时要小心——尤其是博客链接——它们经常变坏，对路过的人毫无帮助。