在Laravel Blade模板中用TailwindCSS实现Bootstrap风格每行3个卡片布局

你原有代码的问题是把布局容器放在了循环内部，导致每个卡片都会单独生成一行布局，直接用Tailwind原生的Grid布局就能快速实现每行3个卡片的响应式效果，修改方案如下：

修改后的完整代码 #

@section('content')
<div class="flex justify-center">
  <div class="w-8/12 bg-white p-6 rounded-lg mt-10">
    <!-- 网格容器放在循环外层 -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
    @forelse($products as $product)
      <!-- 单个卡片 移除外层多余的flex容器 -->
      <div class="mt-16 py-4 px-4 w-full 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 mx-auto" src="{{ asset('storage/images/products/' . $product->image) }}" alt="{{ $product->name }}" />
          <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 col-span-full">There are no products</h1>
    @endforelse
    </div>

    <div class="mt-8">
      {{ $products->links() }}
    </div>
  </div>
</div>
@endsection

关键改动说明 #

• 新增网格容器：在@forelse循环外层加了<div class="grid grid-cols-1 md:grid-cols-3 gap-6">，移动端默认展示1列，md断点（768px）及以上自动每行排列3列，gap-6控制卡片之间的上下左右间距
• 移除冗余结构：删掉了循环内部多余的flex容器层，避免重复生成布局容器打乱排列规则
• 细节优化：给图片加了mx-auto居中，空状态加了col-span-full占满整行，分页区域加了上边距和卡片区域拉开间距
• 可自定义调整：如果需要小屏就显示2列，把网格类改成grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6即可，间距大小可以自行修改gap的数值

内容的提问来源于stack exchange，提问作者Osama Mohammed