Ant Design 是一个基于 React 的 UI 组件库,它提供了强大的栅格系统来帮助开发者在不同页面尺寸中固定宽度。下面是一个使用 Ant Design 栅格系统的示例代码:
import React from "react";
import { Row, Col } from "antd";
const MyComponent = () => {
return (
{/* 这里放置你的内容 */}
{/* 这里放置你的内容 */}
{/* 这里放置你的内容 */}
{/* 这里放置你的内容 */}
);
};
export default MyComponent;
在上面的示例代码中,我们使用了 Row
组件作为栅格的容器,Col
组件作为栅格的列。通过设置 xs
、sm
、md
、lg
和 xl
属性来控制不同页面尺寸下每个栅格列的宽度。
xs
:当屏幕宽度小于 576px 时的栅格列宽度,默认为 24 格,占满一行。sm
:当屏幕宽度大于等于 576px 时的栅格列宽度,默认为 24 格,占满一行。md
:当屏幕宽度大于等于 768px 时的栅格列宽度,默认为 24 格,占满一行。lg
:当屏幕宽度大于等于 992px 时的栅格列宽度,默认为 24 格,占满一行。xl
:当屏幕宽度大于等于 1200px 时的栅格列宽度,默认为 24 格,占满一行。在上面的示例中,每个栅格列的宽度在不同页面尺寸下都是固定的。你可以根据实际需求调整每个栅格列的宽度。