Container

基础容器

最简单的容器使用方式，内容将被限制在一个合理的宽度内并居中显示

内容将被限制在一个合理的宽度内并居中显示

<Container>
<p>内容将被限制在一个合理的宽度内并居中显示</p>
</Container>

不同尺寸的容器

通过 size 属性设置容器的宽度尺寸，支持 xs、sm、md、lg、xl 和 full

小尺寸容器

<Container size="sm">
<p>小尺寸容器</p>
</Container>

自定义内边距

通过 padding 属性设置容器的内边距大小，支持 none、sm、md、lg 和 xl

大内边距的容器

<Container padding="lg">
<p>大内边距的容器</p>
</Container>

不居中的容器

设置 centered 属性为 false 使容器内容不居中显示

不居中的容器，靠左对齐

<Container centered={false}>
<p>不居中的容器，靠左对齐</p>
</Container>

全宽容器

使用 size=“full” 创建一个占满整个可用宽度的容器

全宽容器，无内边距

<Container size="full" padding="none">
<p>全宽容器，无内边距</p>
</Container>

组合使用

展示 Container 组件的多种属性组合使用

大尺寸容器

使用超大内边距，内容居中显示，并添加自定义类名

<Container 
size="lg" 
padding="xl" 
centered={true}
class="my-custom-class"
>
<div class="bg-base-200 p-4 rounded-lg">
  <h3 class="text-lg font-bold">大尺寸容器</h3>
  <p>使用超大内边距，内容居中显示，并添加自定义类名</p>
</div>
</Container>