React+Tailwind CSS团队卡片组件响应式布局调整问询

嗨，我来帮你搞定这个响应式布局的问题！你的需求是让团队卡片在桌面端横向排列、移动端纵向堆叠，用Tailwind的响应式前缀就能轻松实现，不需要额外写媒体查询。我已经帮你调整好了代码，关键修改点会在后面说明：

function Team() {
  return (
    <div>
      <h1 className='text-center font-bold text-2xl'>Meet the Team</h1>
      {/* 调整flex容器的响应式规则 */}
      <div className='p-3 m-3 flex flex-col md:flex-row md:space-x-10 space-y-6 md:space-y-0'>
        {/* 给卡片添加宽度适配类 */}
        <div className="w-full md:max-w-sm bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
          <img className="rounded-t-lg w-full object-cover h-60" src="https://media.vanityfair.com/photos/6319eab06009e759e6638e28/master/w_2560%2Cc_limit/1421315651" alt="Aadya Sharma" />
          <div className="p-5">
            <h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Aadya Sharma </h5>
            <p className="mb-3 font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
          </div>
        </div>

        <div className="w-full md:max-w-sm bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
          <img className="rounded-t-lg w-full object-cover h-60" src="https://media.vanityfair.com/photos/6319eab06009e759e6638e28/master/w_2560%2Cc_limit/1421315651" alt="Shikhar Singh" />
          <div className="p-5">
            <h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Shikhar singh</h5>
            <p className="mb-3 font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
          </div>
        </div>

        <div className="w-full md:max-w-sm bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
          <img className="rounded-t-lg w-full object-cover h-60" src="https://media.vanityfair.com/photos/6319eab06009e759e6638e28/master/w_2560%2Cc_limit/1421315651" alt="Hemant S. Rathod" />
          <div className="p-5">
            <h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Hemant S. Rathod</h5>
            <p className="mb-3 font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Team;

关键修改说明： #

• Flex容器的响应式切换：
  把原来的flex space-x-10改成flex flex-col md:flex-row md:space-x-10 space-y-6 md:space-y-0。移动端（默认小于768px）用flex-col纵向排列，搭配space-y-6设置垂直间距；桌面端（md及以上≥768px）切换为md:flex-row横向排列，用md:space-x-10设置水平间距，同时md:space-y-0取消垂直间距避免冗余。
• 卡片宽度适配：给每个卡片添加w-full md:max-w-sm，让移动端卡片占满容器宽度，桌面端保持原有的max-w-sm窄卡片样式，布局更贴合不同屏幕尺寸。
• 图片优化（可选）：给图片添加w-full object-cover h-60，确保图片在不同屏幕下都能填满卡片顶部区域，避免拉伸变形，同时固定高度保持视觉统一。

这样调整后，你的组件就能完美适配桌面和移动端的布局需求啦~

备注：内容来源于stack exchange，提问作者shikhar0512L