隐藏在我的引导带5侧海军后面的文字
隐藏在我的引导带5侧海军后面的文字
提问于 2022-03-17 21:15:59
我正在尝试创建一个侧navbar (使用引导带5)，这是我实现的，但我的文本隐藏在导航栏后面。有什么我能解决的窍门吗？
这是我的侧海军密码：
const Navbar = ({ handleClick, isLoggedIn, email }) => (
<>
<nav
className="navbar navbar-expand d-flex flex-column align-item-center-start"
id="sidebar"
>
<a href="/" className="navbar-brand text-light mt-8">
<div className="display-6 font-weight-bold">
<span>TESTING</span>
</div>
</a>
<ul className="navbar-nav d-flex flex-column w-100">
<li className=" h-25 nav-item border-bottom">
<a href="/" className="nav-link text-light pl-4">
HOME
</a>
</li>
<li className="h-25 nav-item border-bottom">
<a href="#" className="nav-link text-light ">
SEARCH
</a>
</li>
<li className="nav-item h-10 border-bottom">
<a href="/show" className="nav-link text-light ">
PODCASTS
</a>
</li>
<li className="nav-item h-25 border-bottom">
<a href="#" className="nav-link text-light pl-4">
YOUR LIBRARY
</a>
</li>
<li className="nav-item h-25 border-bottom">
<a href="/login" className="nav-link text-light pl-4">
LOGIN
</a>
</li>
<li className="nav-item h-25 border-bottom">
<a
href="#"
onClick={handleClick}
className="nav-link text-light pl-4"
>
LOGOUT
</a>
</li>
</ul>
</nav>
{isLoggedIn ? (
<LoggedInNav
handleClick={handleClick}
isLoggedIn={isLoggedIn}
email={email}
/>
) : (
<div>
{/* The navbar will show these links before you log in
<a href="/login">Login(Spotify)</a>
<Link to="/signup">Sign Up</Link> */}
</div>
)}
</>
);我的CSS：
.navbar {
width: 210px;
height: 100vh;
position: fixed;
/* margin-left: -300px; */
background-color: darkgray;
}这就是我的应用程序目前的样子：
您可以看到密码表单，但是我的用户名表单被我的导航栏阻塞了。
任何提示都将不胜感激，谢谢！
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-03-17 22:12:05
使用position: fixed;将此元素从正常的内容流中删除。这意味着元素现在可以位于其他元素的顶部(或下面)，并且相对地定位于body。
如果您想在彼此之间同时显示这两种情况，最好的选择是在周围有另一个flex容器(而不是一个片段)。
下面是一个例子：https://codesandbox.io/s/sharp-mclean-tpropv
/* React */
import "./styles.css";
export default function App() {
return (
<div className="wrapper">
<nav className="nav">Hello World</nav>
<div className="other">Login Form</div>
</div>
);
}/* CSS */
.wrapper {
display: flex;
height: 100vh;
}
.nav {
width: 210px;
height: 100vh;
background-color: darkgray;
}
.other {
/* ... */
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71519126
复制相关文章
相似问题
腾讯云开发者
