主页 / coding / 问题 / 79371498
Accepted
TreyCollier
Asked: 2025-01-20 21:35:47 +0800 CST

使用 Tailwind 实现响应式网格列

  • 772

我是 Tailwind 的新手，遇到了 Grid 布局的问题。

<Grid
  gap="3"
  columns={{ initial: '1', md: '4' }}
  align="end"
>
  <Box className="md:col-span-3">
    <Text
      as="p"
      mb="1"
    >
      Password
    </Text>
    <TextField.Root
      type="password"
      placeholder="Password..."
      {...register('password')}
    />
    <ErrorMessage className="mt-5">{errors.password?.message}</ErrorMessage>
  </Box>
  <Button
    disabled={isSubmitting}
  >
    Log In {isSubmitting && <Spinner />}
  </Button>
</Grid>

我的目标是Log In在较大的设备上将按钮放在文本输入旁边，但在较小的设备上将按钮放在下方。

但是，我遇到了这个问题，其中网格布局之间有一个点768px，并且没有按照我预期的方式工作。1024px

我理解的768px是， 是中型设备的断点，1024px是大型设备的断点。

我想象这是一件愚蠢的事情，但却无法完全理解。

我已附加图片来显示该问题。

第二张图是屏幕宽度在 768 到 1024 像素之间时的网格布局。

我的理解是，我为中型设备指定了 4 列，并让<Box>占用其中的 3 列。任何小于 768px 的内容都应仅使用一列。

宽度<768px时的UI

宽度 >768px 但 <1024px 时的 UI

宽度>1024px时的UI

tailwind-css

1 个回答

  1. Best Answer

    Radix UI 和 TailwindCSS 中的断点不同。

    解决方案 1

    对于 Radix UI，MD 断点为 1024px（参见此处）对于 TailwindCSS，MD 断点为 768px（参见此处）

    因此，您应该根据您的喜好使用 Radix md 和 Tailwind lg 的组合，或者 Radix sm 和 Tailwind md 的组合。

    对于您来说，您必须用下列代码片段之一替换您的代码。

    <Grid
  gap="3"
  columns={{ initial: '1', sm: '4' }}
  align="end"
>

    <Box className="lg:col-span-3">

    请注意，Radix xs 和 xl 与它们的 TailwindCSS（sm 和 2xl）对应部分不匹配。

    解决方案 2

    在 tailwind 配置中更改你的主题（参见此处）

    并使用以下值：

    screens: {
    xs: '520px',
    sm: '768px',
    md: '1024px',
    lg: '1280px',
    xl: '1640px',
}

    这样，Radix UI 和 TailwindCSS 之间的响应值将会匹配。

    • 1

相关问题