css - 显示块不移动到下一行
问题描述
我正在尝试用顺风制作一个响应式导航栏。当我打开导航菜单时,我想在每一行中列出我的导航链接和一个项目。现在,他们都排成一排。我正在使用顺风:
function Navbar() {
const [isOpen, setIsOpen] = useState(false);
return (
<header>
<div className="flex flex-col max-w-screen-xl px-4 mx-auto md:items-center md:justify-between md:flex-row md:px-6 lg:px-8">
<div className="p-4 flex flex-row items-center justify-between">
<Link href="/">
<a className="text-lg font-semibold tracking-widest text-gray-900 uppercase rounded-lg dark-mode:text-white focus:outline-none focus:shadow-outline">
Header
</a>
</Link>
<button
className="md:hidden rounded-lg focus:outline-none focus:shadow-outline"
onClick={() => {
setIsOpen(!isOpen);
}}
>
Menu
</button>
</div>
<nav className={isOpen ? "flex" : "md:flex hidden"}>
<NavLink pathTo="/" displayText="Home" />
<NavLink pathTo="/" displayText="Page 1" />
<NavLink pathTo="/" displayText="Page 2" />
</nav>
</div>
</header>
);
}
export default Navbar;
我的 NavLink 组件如下:
import React from "react";
import Link from "next/link";
interface NavItem {
pathTo: string;
displayText: string;
}
function NavLink(item: NavItem) {
return (
<Link href={item.pathTo}>
<a className="block lg:p-4 px-4 py-2 mt-2 border-b-2 border-white text-sm bg-transparent dark-mode:bg-transparent dark-mode:hover:border-red-400 dark-mode:focus:border-red-400 dark-mode:focus:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:border-red-400 focus:border-red-400">
{item.displayText}
</a>
</Link>
);
}
export default NavLink;
我错过了什么?从菜单打开时,我希望 NavLinks 在每一行上都有一个项目。我以为display:block
会这样做,但似乎不会。为什么?
解决方案
您需要在导航链接中添加 flex 方向。添加flex-col
应该可以解决问题。
推荐阅读
- eloquent - 雄辩的查询,结合 where 和 whereBetween
- python - 如何在 Python 中将一两个字母映射到一个区域?
- c# - 有没有一种简单的方法可以在单个 db 行中存储不同长度的数组?
- node.js - 使用 Sequelize 原始查询时如何在嵌套数组中获得一对多关联
- javascript - Javascript/Nodejs 将音频文件下载到磁盘
- java - 使用 Kafka Prod 指标,以便在一个时间窗口内计算指标
- javascript - 链表指针 | 这是什么意思:next 是引用,可以被视为链接或指针?
- django-rest-framework - 如何在序列化程序 django rest 框架中重组返回数据
- optimization - 什么是 kappa 变量(贝叶斯优化)
- git - SourceTree 不显示远程标签