如何并排列出所有链接，每个链接最多有两个文本行，如果不可能，则逐行列出它们？

Question

我正在使用 Fresh、TailwindCSS 和 daisyUI 组件来构建一个小高度页脚，并进行了一些修改：

import IconSphere from "https://deno.land/x/[email protected]/tsx/sphere.tsx"
import IconBrandFacebook from "https://deno.land/x/[email protected]/tsx/brand-facebook.tsx"
import IconBrandDiscord from "https://deno.land/x/[email protected]/tsx/brand-discord.tsx"

export default function Footer() {
    return (
        <footer class="footer items-center p-4 bg-neutral text-neutral-content">
            <aside class="items-center grid-flow-col gap-8">
                <span class='text-2xl italic font-mono font-bold tracking-wide'>Trấn Kỳ</span>
                        <a class="link link-hover">Trấn Kỳ là gì?</a>
                        <a class="link link-hover">Lý do viết Trấn Kỳ</a>
                        <a class="link link-hover">Kế hoạch phát triển Trấn Kỳ</a>
                        <a class="link link-hover">Tích hợp Trấn Kỳ vào hệ thống của bạn</a>
                        <a class="link link-hover">Các buổi đáp ứng nhu cầu tự học lập trình</a>
            </aside> 
            <nav class="grid-flow-col gap-4 md:place-self-center md:justify-self-end">
                <IconSphere class="w-6 h-6" />
                <IconBrandDiscord class="w-6 h-6" />
                <IconBrandFacebook class="w-6 h-6" />           
            </nav>
        </footer>
    )
}

(顺风游乐场)

在大屏幕上它是完美的：

在中屏幕上，当文本最多 2 行时，也很好：

但是在小屏幕上我不希望文本像这样被压扁：

在

<aside>

元素中，如果我删除

grid-flow-col gap-8

类并仅使用

items-center

，那么它可以在移动设备上按预期工作：

我尝试这个代码：

<aside class="items-center md:grid-flow-col md:gap-8">

但是它保留了小屏幕到中大屏幕的布局。

简而言之，我想构建一个页脚：

• 列出所有链接并排列出，每个链接最多有两个文本行
• 如果不可能，请逐行列出它们

有办法实现吗？

Answer 1

你可以尝试这样做：

<footer className='text-neutral-content flex xl:items-center justify-between bg-neutral-300 p-4'>
            <aside
                className='grid items-center gap-5 md:grid-cols-1
                lg:grid-cols-[minmax(min-content,max-content)_minmax(min-content,max-content)_minmax(min-content,max-content)_minmax(min-content,max-content)_minmax(min-content,max-content)_minmax(min-content,max-content)]'
            >
                <span className='font-mono text-2xl font-bold italic tracking-wide'>
                    Trấn Kỳ
                </span>
                <a className='link link-hover'>Trấn Kỳ là gì?</a>
                <a className='link link-hover'>Lý do viết Trấn Kỳ</a>
                <a className='link link-hover'>Kế hoạch phát triển Trấn Kỳ</a>
                <a className='link link-hover'>
                    Tích hợp Trấn Kỳ vào hệ thống của bạn
                </a>
                <a className='link link-hover'>
                    Các buổi đáp ứng nhu cầu tự học lập trình
                </a>
            </aside>
            <nav className='flex h-fit items-center gap-4 '>
                <FiInstagram className='h-6 w-6 ' />
                <FiTrello className='h-6 w-6 ' />
                <FiWatch className='h-6 w-6 ' />
            </nav>
        </footer>