【发布时间】：2022-01-10 12:43:39
【问题描述】：
我有一个包含 Minecraft 游戏插件的页面。按照计划，页面应该是 2 列，但由于某种原因，所有内容都在 1 列中，并且右侧有第二列的空白区域。我已经尝试修复这个错误一个小时了。
我正在使用 React 和 Tailwind。此页面现在的外观截图：
你在截图中看到的，右边的空间是空的。
这是我的组件的代码：
<ServerContentBlock title={'Plugins'} css={tw`flex flex-wrap`}>
<div css={tw`w-full`}>
<FlashMessageRender byKey={'server:plugins'} css={tw`mb-4`} />
<div css={tw`px-1 py-2`}>
<Formik
onSubmit={submit}
initialValues={{ query: '', size: 10 }}
validationSchema={object().shape({
query: string(),
size: number().required(),
})}
>
<Form>
<div css={tw`flex flex-wrap`}>
<div css={tw`w-full sm:w-8/12 sm:pr-4`}>
<Field
name={'query'}
placeholder={'PVPUtils'}
/>
</div>
<div css={tw`w-full sm:w-4/12`}>
<FormikFieldWrapper name={'size'}>
<FormikField as={Select} name={'size'}>
<option value={10}>10</option>
<option value={25}>25</option>
<option value={50}>50</option>
</FormikField>
</FormikFieldWrapper>
</div>
</div>
</Form>
</Formik>
</div>
</div>
{!data ?
<div css={tw`w-full`}>
<Spinner size={'large'} centered />
</div>
:
<>
{data.plugins.length < 1 ?
<p css={tw`text-center text-sm text-neutral-400 pt-4 pb-4`}>
There are no plugins. Try to search again...
</p>
:
(
<>
{data.plugins.map((item, key) => (
<div tyle="display:grid" css={tw`w-full md:w-6/12 md:pl-2 md:pr-2 pt-4`} key={key}>
<TitledGreyBox title={item.name}>
<div css={tw`px-1 py-2`}>
<div css={tw`flex flex-wrap`}>
<div css={tw`w-auto lg:w-2/12 pr-4`}>
<img css={'width: 48px; height: 48px;'} src={(item.icon.url === '' ? '//static.spigotmc.org/styles/spigot/xenresource/resource_icon.png' : `//www.spigotmc.org/${item.icon.url}`)} />
</div>
<div css={tw`w-auto lg:w-10/12`}>
{item.tag}
</div>
</div>
<span>
<FontAwesomeIcon css={`${item.rating.average >= 1 ? 'color: yellow;' : ''} ${tw`mt-4`}`} icon={faStar} />
<FontAwesomeIcon css={`${item.rating.average >= 2 ? 'color: yellow;' : ''} ${tw`mt-4`}`} icon={faStar} />
<FontAwesomeIcon css={`${item.rating.average >= 3 ? 'color: yellow;' : ''} ${tw`mt-4`}`} icon={faStar} />
<FontAwesomeIcon css={`${item.rating.average >= 4 ? 'color: yellow;' : ''} ${tw`mt-4`}`} icon={faStar} />
<FontAwesomeIcon css={`${item.rating.average >= 5 ? 'color: yellow;' : ''} ${tw`mt-4`}`} icon={faStar} />
</span>
{item.file.type !== 'external' &&
<ManageButton pluginId={item.id} installed={item.installed}></ManageButton>
}
<LinkButton target={'_blank'} href={`https://api.spiget.org/v2/resources/${item.id}/go`} css={`float: right; margin-top: .8rem; ${tw`mr-1`}`} type={'button'} color={'primary'} size={'xsmall'}>
<FontAwesomeIcon icon={faExternalLinkAlt}/> View
</LinkButton>
</div>
</TitledGreyBox>
</div>
))}
</>
)
}
</>
}
</ServerContentBlock>
我也尝试添加grid grid-cols-2 gap-2，但它不会改变页面，它是改变TitledGreyBox，也许我将它添加到错误的空间？
哪里有问题？我会很感激你的帮助，因为我不明白出了什么问题。
【问题讨论】：
-
您能否使用play.tailwindcss.com 为我们提供stackoverflow.com/help/minimal-reproducible-example？我认为我们可以将 react 排除在外
-
希望你明白了吗？
标签： css reactjs tailwind-css