为啥我的按钮位于导航栏中的“工作流程”下方？
Posted
技术标签:
【中文标题】为啥我的按钮位于导航栏中的“工作流程”下方？【英文标题】：Why my button is below "Workflow" in my navbar?为什么我的按钮位于导航栏中的“工作流程”下方？ 【发布时间】：2021-08-31 18:51:18 【问题描述】：我正在使用顺风和响应式设计。这是我的代码：
import React, useState from "react";
import Transition from "@headlessui/react";
function Nav()
const [isOpen, setIsOpen] = useState(false);
return (
<div>
<nav className="bg-gray-800">
<div>
<div>
<div className="flex">
<div>
<img className="h-8 w-32" />
</div>
<div className="hidden md:block ml-auto">
<div className="space-x-4">
<a
href="#"
className=" hover:bg-gray-700 text-white px-3 py-2 rounded-md text-sm font-medium"
>
Dashboard
</a>
<a
href="#"
className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"
>
Team
</a>
<a
href="#"
className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"
>
Projects
</a>
<a
href="#"
className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"
>
Calendar
</a>
<a
href="#"
className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"
>
Reports
</a>
</div>
</div>
</div>
<div className="-mr-2 flex md:hidden">
<button
onClick=() => setIsOpen(!isOpen)
type="button"
className="bg-gray-900 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"
aria-controls="mobile-menu"
aria-expanded="false"
>
<span className="sr-only">Open main menu</span>
!isOpen ? (
<svg
className="block h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M4 6h16M4 12h16M4 18h16"
/>
</svg>
) : (
<svg
className="block h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
)
</button>
</div>
</div>
</div>
<Transition
show=isOpen
enter="transition ease-out duration-100 transform"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="transition ease-in duration-75 transform"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
(ref) => (
<div className="md:hidden" id="mobile-menu">
<div ref=ref className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<a
href="#"
className="hover:bg-gray-700 text-white block px-3 py-2 rounded-md text-base font-medium"
>
Dashboard
</a>
<a
href="#"
className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
>
Team
</a>
<a
href="#"
className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
>
Projects
</a>
<a
href="#"
className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
>
Calendar
</a>
<a
href="#"
className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
>
Reports
</a>
</div>
</div>
)
</Transition>
</nav>
</div>
);
export default Nav;
但问题是当我减小窗口的宽度时：
问题是我想把按钮放在右边。
我该怎么做？
我确实想保留其他菜单：
我该怎么做？
非常感谢！
full code
【问题讨论】：
您可以将display: flex; flex-direction: column-reverse 添加到按钮和工作流父级以翻转它们
【参考方案1】：
您可以尝试移动此代码：
<div className="-mr-2 flex md:hidden">
<button
onClick=() => setIsOpen(!isOpen)
type="button"
className="bg-gray-900 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"
aria-controls="mobile-menu"
aria-expanded="false"
>
<span className="sr-only">Open main menu</span>
!isOpen ? (
<svg
className="block h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M4 6h16M4 12h16M4 18h16"
/>
</svg>
) : (
<svg
className="block h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
)
</button>
</div>
到div之前的内部
<div className="flex">
并将下一个代码 div 添加到提到的第一个 div 之前（移动后）：
<div className="m-auto md:hidden"></div>
更改为此提到的第一个 div 的类：
<div className="flex md:hidden">
仅此而已。所以最终的代码是这样的：
import React, useState from "react";
import Transition from "@headlessui/react";
function Nav()
const [isOpen, setIsOpen] = useState(false);
return (
<div>
<nav className="bg-gray-800">
<div>
<div>
<div className="flex">
<div>
<img className="h-8 w-32" />
</div>
<div className="hidden md:block ml-auto">
<div className="space-x-4">
<a
href="#"
className=" hover:bg-gray-700 text-white px-3 py-2 rounded-md text-sm font-medium"
>
Dashboard
</a>
<a
href="#"
className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"
>
Team
</a>
<a
href="#"
className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"
>
Projects
</a>
<a
href="#"
className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"
>
Calendar
</a>
<a
href="#"
className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"
>
Reports
</a>
</div>
</div>
<div className="m-auto md:hidden"></div>
<div className="-mr-2 flex md:hidden">
<button
onClick=() => setIsOpen(!isOpen)
type="button"
className="bg-gray-900 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"
aria-controls="mobile-menu"
aria-expanded="false"
>
<span className="sr-only">Open main menu</span>
!isOpen ? (
<svg
className="block h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M4 6h16M4 12h16M4 18h16"
/>
</svg>
) : (
<svg
className="block h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
)
</button>
</div>
</div>
</div>
</div>
<Transition
show=isOpen
enter="transition ease-out duration-100 transform"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="transition ease-in duration-75 transform"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
(ref) => (
<div className="md:hidden" id="mobile-menu">
<div ref=ref className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<a
href="#"
className="hover:bg-gray-700 text-white block px-3 py-2 rounded-md text-base font-medium"
>
Dashboard
</a>
<a
href="#"
className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
>
Team
</a>
<a
href="#"
className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
>
Projects
</a>
<a
href="#"
className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
>
Calendar
</a>
<a
href="#"
className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
>
Reports
</a>
</div>
</div>
)
</Transition>
</nav>
</div>
);
export default Nav;
你可以看到结果here
【讨论】：
【参考方案2】：请插入此行:)
return (
<div>
<nav className="bg-gray-800">
<div>
<div className="flex flex-row justify-between"> <==== "this"
<div className="flex">
<div>
<img className="w-32 h-8" />
</div>
还可以查看TailwindCSS中的更多文档， 编码愉快！
【讨论】：
以上是关于为啥我的按钮位于导航栏中的“工作流程”下方？的主要内容，如果未能解决你的问题，请参考以下文章