时间戳

首页 > 解决方案 > 如何将 ant.design 跨度重置为默认值？

reactjs - 如何将 ant.design 跨度重置为默认值？

问题描述

我将 ant.design 与 React.js 一起使用，并且当屏幕尺寸小于 768 像素时，我将列设置为 24 的跨度：

<Col
    xs={{ span: 24 }}
    sm={{ span: 24 }}
    md={{ span: undefined }}
    lg={{ span: default }}
    xl={{ span: none }}
>

但是当屏幕尺寸大于 768 像素时，我不想定义跨度（我希望列占用尽可能少的空间）。如果我不写 include md、lg 和 xl，它们会自动占用 sm 的跨度。我尝试将 span 设置为 undefined、default 和 none，但它们都不起作用。我查看了ant.design API，但它只是说默认值是 none。

任何帮助，将不胜感激。:)

标签： reactjsantd

解决方案

antd 布局无法满足您的要求 网格系统的整个想法是将屏幕拆分为 24 列，因此无法通过更改 spans 属性来实现您的目标

您可以交替将 col 设置为屏幕宽度的 100%（跨度 24），并在其中使用您的项目上的 flex/grid

您可以选择另一条路径，即制作与不与 col 一起使用的网格无关的“div/span”，并在其后使用 col

推荐阅读