英文:
The cards are not responsive
问题
以下是您提供的代码的翻译部分：
function Team() {
return (
<div>
<h1 className='text-center font-bold text-2xl'>Meet the Team</h1>
<div className='p-3 m-3 flex space-x-10'>
<div className="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" src="https://media.vanityfair.com/photos/6319eab06009e759e6638e28/master/w_2560%2Cc_limit/1421315651" alt="" />
<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="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" src="https://media.vanityfair.com/photos/6319eab06009e759e6638e28/master/w_2560%2Cc_limit/1421315651" alt="" />
<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="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" src="https://media.vanityfair.com/photos/6319eab06009e759e6638e28/master/w_2560%2Cc_limit/1421315651" alt="" />
<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;
这是您提供的React代码，用于创建一系列卡片。如果您有其他问题或需要进一步的帮助，请随时告诉我。
英文:
function Team() {
return (
<div>
<h1 className='text-center font-bold text-2xl'>Meet the Team</h1>
<div className='p-3 m-3 flex space-x-10'>
<div className="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" src="https://media.vanityfair.com/photos/6319eab06009e759e6638e28/master/w_2560%2Cc_limit/1421315651" alt="" />
<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="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" src="https://media.vanityfair.com/photos/6319eab06009e759e6638e28/master/w_2560%2Cc_limit/1421315651" alt="" />
<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="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" src="https://media.vanityfair.com/photos/6319eab06009e759e6638e28/master/w_2560%2Cc_limit/1421315651" alt="" />
<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;
This is a code for a collections of card which are in rows at in desktop view but i want them to be in columns when it is phone view . i am using react with tailwind css.
答案1
得分: 1
Here's the translated content:
如果您希望在移动设备上将卡片放在单列，然后在较大设备上将其放在一行，有几种方法可以实现：flexbox 和 grid 可能是最简单的方式。
使用 flexbox 的一种方法是将 flex-direction 设置为 column（通过添加 flex-col 类），然后在某些较大的断点上更改方向为 row，并添加 flex-wrap。在 TailwindCSS 中，您使用断点（例如，sm、md、lg、xl、2xl），后跟冒号，然后是要在该断点应用的属性（例如，md:flex-row md:flex-wrap）。
使用 flexbox 的示例（运行并在全屏模式下测试响应性）：
function Team() {
return (
<div>
<h1 className="text-center text-2xl font-bold">Meet the Team</h1>
<div className="flex flex-col gap-6 p-3 md:flex-row md:flex-wrap">
<!-- Card 1 -->
<!-- Card 2 -->
<!-- Card 3 -->
</div>
</div>
)
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Team />)
使用 grid 可以更好地控制在每个断点上显示的列数。例如，您可以在超小屏幕上使用 1 列，在小屏幕和中屏幕上使用 2 列，然后在大屏幕上使用 4 列。要实现这一点，您可以使用：grid grid-cols-1 gap-6 p-3 sm:grid-cols-2 lg:grid-cols-4。
使用 grid 的示例：
function Team() {
return (
<div>
<h1 className="text-center text-2xl font-bold">Meet the Team</h1>
<div className="grid grid-cols-1 gap-6 p-3 sm:grid-cols-2 lg:grid-cols-4">
<!-- Card 1 -->
<!-- Card 2 -->
<!-- Card 3 -->
</div>
</div>
)
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Team />)
请注意，我仅提供了代码部分的翻译。
英文:
If you want the cards to be in a single column on mobile devices and then on larger devices to be in row, there are a couple of ways to do that: flexbox and grid are probably the easiest.
One way that you can use flexbox would be to set the flex-direction to column (by adding the class flex-col) and then for some larger breakpoint change the direction to row and add flex-wrap. In TailwindCSS you use the breakpoint (e.g., sm, md, lg, xl, 2xl) followed by a colon and then the property to apply at that breakpoint (e.g., md:flex-row md:flex-wrap).
Working snippet with flexbox (run and then open in full screen to test responsiveness):
<!-- begin snippet: js hide: true console: false babel: true -->
<!-- language: lang-js -->
function Team() {
return (
<div>
<h1 className="text-center text-2xl font-bold">Meet the Team</h1>
<div className="flex flex-col gap-6 p-3 md:flex-row md:flex-wrap">
<div className=" mx-auto max-w-sm rounded-lg border border-gray-200 bg-white shadow dark:border-gray-700 dark:bg-gray-800">
<img className="rounded-t-lg" src="https://media.vanityfair.com/photos/6319eab06009e759e6638e28/master/w_2560%2Cc_limit/1421315651" alt="" />
<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=" mx-auto max-w-sm rounded-lg border border-gray-200 bg-white shadow dark:border-gray-700 dark:bg-gray-800">
<img className="rounded-t-lg" src="https://media.vanityfair.com/photos/6319eab06009e759e6638e28/master/w_2560%2Cc_limit/1421315651" alt="" />
<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=" mx-auto max-w-sm rounded-lg border border-gray-200 bg-white shadow dark:border-gray-700 dark:bg-gray-800">
<img className="rounded-t-lg" src="https://media.vanityfair.com/photos/6319eab06009e759e6638e28/master/w_2560%2Cc_limit/1421315651" alt="" />
<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>
)
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Team/>)
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<div id="root"></div>
<!-- end snippet -->
Grid would give you more control over the number of columns to display at each breakpoint. For example, you could have 1 column for extra small screens, 2 columns for small and medium screens and then on large screen have 4 columns. To do that you'd use: grid grid-cols-1 gap-6 p-3 sm:grid-cols-2 lg:grid-cols-4.
Working snippet with grid:
<!-- begin snippet: js hide: true console: false babel: true -->
<!-- language: lang-js -->
function Team() {
return (
<div>
<h1 className="text-center text-2xl font-bold">Meet the Team</h1>
<div className="grid grid-cols-1 gap-6 p-3 sm:grid-cols-2 lg:grid-cols-4">
<div className=" mx-auto max-w-sm rounded-lg border border-gray-200 bg-white shadow dark:border-gray-700 dark:bg-gray-800">
<img className="rounded-t-lg" src="https://media.vanityfair.com/photos/6319eab06009e759e6638e28/master/w_2560%2Cc_limit/1421315651" alt="" />
<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=" mx-auto max-w-sm rounded-lg border border-gray-200 bg-white shadow dark:border-gray-700 dark:bg-gray-800">
<img className="rounded-t-lg" src="https://media.vanityfair.com/photos/6319eab06009e759e6638e28/master/w_2560%2Cc_limit/1421315651" alt="" />
<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=" mx-auto max-w-sm rounded-lg border border-gray-200 bg-white shadow dark:border-gray-700 dark:bg-gray-800">
<img className="rounded-t-lg" src="https://media.vanityfair.com/photos/6319eab06009e759e6638e28/master/w_2560%2Cc_limit/1421315651" alt="" />
<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>
)
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Team/>)
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<div id="root"></div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论