我如何使我的内容出现在我的粘边栏旁边？
我如何使我的内容出现在我的粘边栏旁边？
提问于 2022-03-21 01:05:56
我刚开始用reactJ和引导5编写第一个项目，我一直在尝试获得一个粘边的导航条，它就在旁边，我的内容就出现在旁边，甚至在切换路由时也是如此。目前，我的内容呈现在我的侧边栏之下。
我的侧代码navBar：
const Navbar = ({ handleClick, isLoggedIn, email }) => (
<div>
<nav
className="navbar navbar-expand d-flex flex-column align-item-center-start"
id="sidebar"
>
<a href="/" className="navbar-brand text-light mt-2">
<div className="display-6 font-weight-bold">
<span>SPODify +</span>
</div>
</a>
<ul className="navbar-nav d-flex flex-column w-100 mt-4">
<li className=" h-25 nav-item border-bottom">
<a href="/topcharts" className="nav-link text-light pl-4">
<span>
<i className="bi bi-house-door "></i>
HOME
</span>
</a>
</li>
<li className="h-25 nav-item border-bottom">
<a href="#" className="nav-link text-light ">
<span>
<i className="bi bi-search"></i>
SEARCH
</span>
</a>
</li>
<li className="nav-item h-10 border-bottom">
<a href="/show" className="nav-link text-light ">
<span>
<i className="bi bi-rainbow"></i>
PODCASTS
</span>
</a>
</li>
<li className="nav-item h-25 border-bottom">
<a href="#" className="nav-link text-light pl-4">
<span>
<i className="bi bi-collection"></i>
YOUR LIBRARY
</span>
</a>
</li>
</ul>
<div className="navbar navbar-expand d-flex flex-column-reverse align-item-center-start">
<ul className="navbar-nav d-flex flex-column-reverse w-100 mt-4">
{isLoggedIn ? (
<>
<li className="nav-item h-25">
<a href="/login" className="nav-link text-light pl-4">
<span>
<i className="bi bi-person-circle"></i>
{email}
</span>
</a>
</li>
<li className="nav-item h-25 ">
<a
href="#"
onClick={handleClick}
className="nav-link text-light pl-4"
>
LOGOUT
</a>
</li>
</>
) : (
<li className="nav-item h-25 ">
<a href="/login" className="nav-link text-light pl-4">
LOGIN
</a>
</li>
)}
</ul>
</div>
</nav>
</div>
);以及我当前的CSS文件：
body {
font-family: sans-serif;
background-color: black;
color: white;
}
a {
text-decoration: none;
}
label {
display: block;
}
nav a {
margin: 5px;
}
form div {
margin: 1em;
display: inline-block;
}
.main {
/* position: relative;
min-height: 100vh; */
}
.wrapper {
display: flex;
}
.content {
/* display: flex; */
}
.navbar {
width: 250px;
height: 100%;
background-color: darkgray;
}
i {
margin-right: 15px;
font-size: 22px;
}
i:hover {
color: red;
}
nav a.nav-link span:hover {
color: red;
}
a.navbar-brand span:hover {
color: red;
}
.card {
background: rgb(55, 54, 54);
margin-bottom: 30px;
transition: 0.5s;
border: 0;
border-radius: 0.55rem;
position: relative;
width: 100%;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
}
.card .body {
font-size: 14px;
color: #424242;
padding: 20px;
font-weight: 400;
}我有一个应用程序文件，这是我的应用程序的起点，因此，即使切换路径，我的侧Navbar也会坚持：
const App = () => {
return (
<div className="main">
<div className="wrapper">
<Navbar />
</div>{" "}
<div className="content">
<Routes />
</div>
</div>
);
};我以为将我的导航组件封装在div标签中，并在另一个div标记中包含我的路由，就会使它在彼此之间呈现正确。
这就是我现在的网站的样子：
我想要实现的卡片的播客渲染就在我旁边的纳瓦尔，任何提示都将是非常感谢！我已经做了很长一段时间了，我想不出来。提前感谢！
回答 1
Stack Overflow用户
发布于 2022-03-21 01:40:06
添加以下yo类：
.main {
display: flex;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71551859
复制相关文章
相似问题
腾讯云开发者
