卡片与容器

内容要分区、要好看，最直接的办法是用卡片和容器。UCard 提供带边框和圆角的卡片，UContainer 负责限制内容最大宽度并居中，两者配合能快速搭出整齐的页面骨架。

本篇基于 /453.html 接好的环境。

UCard 卡片

UCard 自带三个插槽（#header、#default 默认、#footer），分别对应卡片的头、身、脚。

<template>
  <UCard class="w-80">
    <template #header>
      <h3 class="font-bold">用户资料</h3>
    </template>

    <p>这里是卡片正文，可以放任意内容。</p>

    <template #footer>
      <UButton variant="soft">查看详情</UButton>
    </template>
  </UCard>
</template>

不加插槽时，直接写在 UCard 标签里的内容会落在正文区域。

UCard 还有 variant（solid/outline/subtle）和 orientation 等属性，控制外观和内部排列方向，新手用默认的 outline 就足够清晰。

UContainer 容器

UContainer 把内容限制在一个最大宽度内并水平居中，避免在大屏幕上文字铺太开。

<template>
  <UContainer>
    <h1 class="text-2xl font-bold my-6">文章标题</h1>
    <p>这是被容器约束宽度的正文内容。</p>
  </UContainer>
</template>

常用做法是页面最外层套 UContainer，内部再放 UCard 或其他组件。

结合布局

一个典型的内容页结构是「容器里放一张大卡片」。

<template>
  <UContainer class="py-8">
    <UCard>
      <template #header>
        <h2 class="text-xl font-bold">设置</h2>
      </template>

      <p>在这里放表单或其他内容，比如 [表单与输入](/455.html) 的例子。</p>

      <template #footer>
        <div class="flex justify-end gap-2">
          <UButton variant="ghost">取消</UButton>
          <UButton>保存</UButton>
        </div>
      </template>
    </UCard>
  </UContainer>
</template>

flex、justify-end、gap-2 这些都是 Tailwind 的工具类，Nuxt UI 带着 Tailwind 一起可用，不需要额外配置。

栅格与多列

要并排显示多张卡片，用 Tailwind 的 grid 工具类即可，Nuxt UI 不强制自己的栅格组件。

<template>
  <UContainer>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
      <UCard v-for="n in 3" :key="n">
        <template #header>
          <h3 class="font-bold">卡片 {{ n }}</h3>
        </template>
        <p>一些说明文字。</p>
      </UCard>
    </div>
  </UContainer>
</template>

grid-cols-1 在手机上单列，sm:、lg: 是响应式断点，屏幕变宽后自动变成两列、三列。

常见问题

参考资料

• Nuxt UI Card 文档
• Nuxt UI Container 文档