如何使用tailwind和nextjs使两列设计响应式

Question

我目前正在为我的求职信设计一个响应式布局，我偶然发现了一个关于响应性的问题。 桌面布局看起来像这样。 但是，我选择在移动视图中隐藏文本和进度条，但芯片上的边距并不统一，正如您在此处看到的那样。

我将此代码用于计算机技能部分，因为我认为我可以将解决方案应用于下面的部分。 但是，如果需要上下文，我会发布更多代码

<div className="grid grid-rows-4 grid-cols-1 sm:grid-cols-3 items-center justify-center w-full">
  <p className="text-center hidden md:block">Computer Skills</p>
  <div className="flex flex-row gap-2 justify-center col-span-2 items-center">
    <CustomButton text="STUB1" />
    <ProgressBar width="w-full" />
  </div>
  <div className="col-span-1  m-2 sm:m-6" />
  <div className="flex gap-2 justify-center col-span-2 items-center">
    <CustomButton text="STUB2" />
    <ProgressBar width="w-3/4" />
  </div>
  <div className="col-span-1 m-2 sm:m-6" />
  <div className="flex gap-2 justify-center col-span-2 items-center mt-3 sm:mt-0">
    <CustomButton text="STUB3" />
    <ProgressBar width="w-3/4" />
  </div>
  <CustomLine ine isDashed="yes" />
</div>

非常感谢您提前提供的帮助

Answer 1

如果有任何响应问题，请尝试此操作，然后让您的组件响应，这将是任何问题......！

<div className="grid grid-cols-1 grid sm:grid-cols-12 md:grid-cols-4 lg:grid-cols-4 xl:grid-cols-4 items-center justify-center w-full">
  <p className="text-center hidden md:block">Computer Skills</p>
  <div className="flex flex-row gap-2 justify-center col-span-2 items-center">
    <CustomButton text="STUB1" />
    <ProgressBar width="w-full" />
  </div>
  <div className="col-span-1  m-2 sm:m-6" />
  <div className="flex gap-2 justify-center col-span-2 items-center">
    <CustomButton text="STUB2" />
    <ProgressBar width="w-3/4" />
  </div>
  <div className="col-span-1 m-2 sm:m-6" />
  <div className="flex gap-2 justify-center col-span-2 items-center mt-3 sm:mt-0">
    <CustomButton text="STUB3" />
    <ProgressBar width="w-3/4" />
  </div>
  <CustomLine ine isDashed="yes" />
</div>