这是我开始的地方
预览
代码:
iterrows
然后我尝试使它更加间隔,如此处的代码库示例所示: https://codepen.io/codetimeio/pen/RYMEJe
但是每次我尝试添加一些填充和边距时,它都会移到下一行,并且我无法弄清楚为什么这样做或如何停止它
这是我更新的行:
<div class="container my-12 mx-auto">
<div className="flex flex-wrap ">
{error ? <p>{error.message}</p> : null}
{!isLoading ? (
users.map(user => {
const { username, name, email } = user;
return (
<div
key={username}
className="w-full md:w-1/2 lg:w-1/3 my-5"
>
<article class="overflow-hidden rounded-lg shadow-lg">
<img
alt="Placeholder"
className="block h-auto w-full"
src="https://picsum.photos/600/400/?random"
/>
<header class="flex items-center justify-between leading-tight p-2 bg-white invisible lg:visible">
<h1 class="text-lg">{name}</h1>
<p class="text-grey-darker text-sm">
{email}
</p>
</header>
</article>
</div>
这是我的顺风配置文件
<div key={username} className="w-full md:w-1/2 lg:w-1/3 my-5 mx-5">
我真的很想了解我做错了什么,以便可以将tailwind用作主要的模板框架
根据下面给出的答案,这是更新的代码
module.exports = {
theme: {
container: {
center: true
},
screens: {
sm: "640px",
md: "768px",
lg: "1024px",
xl: "1280px"
},
fontFamily: {
display: ["Gilroy", "sans-serif"],
body: ["Graphik", "sans-serif"]
},
extend: {}
},
variants: {},
plugins: []
};
答案 0 :(得分:0)
发生这种情况是因为有多余的页边空白,w-1/3
的意思是〜width: 33.3333%
,如果在页边空白处添加页边空白,则三个不能排成一行。
还有其他方法(宽度考虑到装订线或gap property),但是在这种情况下,您可以只使用填充而不是边距,因为您的卡周围已经有了表示性包装元素。
示例:https://codepen.io/tlgreg/pen/RmLMOx
不相关,但是很少有注释可以查看您的代码:
grey-darker
将不起作用。img
在v1中默认为block
。invisible
和lg:visible
更改visibility
,标题将占用空间,如果那不是您想要的空间,则应为hidden
和lg:flex
。