如何将导航栏向右移动并应用背景颜色? [英] How to move navbar to right and apply background color?

问题描述

我正在使用 react + tailwind 制作一个简单的应用程序，我目前正在处理导航栏部分.

Navbar.js:

从反应"导入反应；导出默认功能 Navbar({ 固定 }) {const [navbarOpen, setNavbarOpen] = React.useState(false);返回 (<><nav className="relative flex flex-wrap items-center justify-between px-2 py-3 bg-pink-500 mb-3"><div className="container px-4 mx-auto flex-wrap items-center justify-between"><div className="w-full 相对 flex justify-between lg:w-auto lg:static lg:block lg:justify-start>setNavbarOpen(!navbarOpen)}><i className="fas fa-bars"></i>

<li className="nav-item"><a className="px-3 py-2 flex items-center text-xs大写字体-粗体前导-snug text-white hover:opacity-75">第 1 行 - 菜单 2</a>

<a className="px-3 py-2 flex items-center text-xs大写字体-粗体前导-snug text-white hover:opacity-75">第 1 行 - 菜单 3</a>

</nav></>);}

完整的工作示例:

<块引用>

https://codesandbox.io/s/tailwind-css-and-react-forked-1y10y

问题和尝试的方法:

• 在当前场景中，背景颜色粉红色应用于整个标题布局.

• 我可以理解发生这种情况是因为我已将 css 类名 bg-pink-500 应用于整个导航栏.

• 但是，如果我将此背景颜色移动到任何子 div 中，则它无法按预期工作.

要求:

要求是在响应式视图中，整个布局需要完全像这样，

<代码>|-- Logo -- 这个酒吧需要有 bg-pink -- 汉堡包图标 -- ||||-- 第 1 行 - 菜单 1 -- ||-- 第 1 行 - 菜单 2 -- |-->只有这个区域有bg-pink|-- 第 1 行 - 菜单 3 -- ||-- 第 2 行 - 菜单 1 -- |

请点击此图片查看类似预期一个>

请帮我实现 bg-pink 颜色仅用于顶部导航栏和右侧的菜单项栏.

可以在此链接中查看当前 UI:https://1y10y.csb.app/ (请切换到响应模式)

解决方案

您可以通过在将用作侧边栏的 div 上使用 position 作为 fixed 来实现此目的.但是对于其他大屏幕，您需要删除 position 属性，它会显示在导航栏的中间.

尝试以下操作:-

从反应"导入反应；导出默认功能 Navbar({ 固定 }) {const [navbarOpen, setNavbarOpen] = React.useState(false);返回 (<><nav className="relative flex flex-wrap items-center justify-between px-2 py-3 bg-pink-500 mb-3">
setNavbarOpen(!navbarOpen)}><i className="fas fa-bars"></i>

<li className="nav-item"><a className="px-3 py-2 flex items-center text-xs大写字体-粗体前导-snug text-white hover:opacity-75">第 1 行 - 菜单 2</a><li className="nav-item"><a className="px-3 py-2 flex items-center text-xs大写字体-粗体前导-snug text-white hover:opacity-75">第 1 行 - 菜单 3</a>