[英]Page content included in Nav Bar
First Output: https://ibb.co/k2RJ1m6首先Output: https://ibb.co/k2RJ1m6
What i need to achieve: https://ibb.co/86nhB6m我需要实现的目标: https://ibb.co/86nhB6m
The Page Content is the X Mark and the toolbar.页面内容是 X 标记和工具栏。 But instead of being outside like the 2nd Image, it is getting included inside the Sidebar.
但它并没有像第二张图片那样出现在外面,而是包含在侧边栏中。 Here's the Code
这是代码
<body>
<div class="wrapper">
<nav id="sidebar">
<!-- <script src="C-NavigationBar.js"></script> -->
</nav>
<div id="content">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button type="button" id="sidebarCollapse" class="navbar-btn">
<span></span>
<span></span>
<span></span>
</button>
</div>
</nav>
</div>
</div>
</body>
I make style for your output so when you add the style in your code it will work like your second image.我为您的 output 制作样式,因此当您在代码中添加样式时,它将像您的第二张图片一样工作。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<style>
#sidebar{
background-color:#000;
width:230px;
height:100vh;
float:left;
}
#content{
float:left;
width:calc(100% - 230px);
padding: 10px;
}
.navbar-btn span:first-child {
width: 26px;
height: 2px;
background: #000;
display: block;
transform: rotate(45deg);
margin: 0 auto;
}
.navbar-btn span:last-child {
width: 26px;
height: 2px;
background: #000;
display: block;
transform: rotate(-45deg);
margin: 0 auto;
}
.navbar-btn {
width: 40px;
height: 40px;
border: none;
text-align: center;
}
</style>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.