Ant Design中与Bootstrap 4间距工具对应的功能是什么？

当然有！Ant Design 提供了一套和 Bootstrap 4 逻辑相似的响应式间距工具类，能快速调整元素的 margin 和 padding，命名规则既有共通点也有自身特点，下面给你详细说明：

核心规则对比 #

和 Bootstrap 4 的 {property}{sides}-{breakpoint}-{size} 结构呼应，Ant Design 的间距类分为两种格式：

• 基础无断点版本：{property}{direction}-{size}
• 响应式版本：{property}{direction}-{breakpoint}-{size}

参数细节拆解 #

• property（属性）：
  • m：对应 margin
  • p：对应 padding
• direction（方向）：
  • t：顶部（top）
  • b：底部（bottom）
  • l：左侧（left）
  • r：右侧（right）
  • x：水平方向（左右同时设置）
  • y：垂直方向（上下同时设置）
  • 空值：四个方向同时设置（类似 Bootstrap 中不指定 sides 的场景）
• breakpoint（断点）：
  • 支持 sm、md、lg、xl、xxl，和 Ant Design 原生响应式断点完全对齐
• size（尺寸）：
  • 取值为 0 到 8，对应预设间距：0=0px、1=4px、2=8px……8=32px；另外还有 auto 选项，可用于 margin 的自动分配（比如垂直居中场景）

实用代码示例 #

• 给元素全方向添加 8px margin：m-2
• 仅在 md 及以上断点给元素水平方向设置 16px padding：px-md-4
• 给元素设置顶部 margin 自动：mt-auto
• 给元素垂直方向添加 24px padding：py-6

额外提示 #

这些工具类完全支持响应式适配，能针对不同屏幕尺寸设置差异化间距。如果预设尺寸不符合需求，还可以通过修改 Ant Design 的主题变量来自定义间距刻度。

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