我一直在尝试遵循以下指南: https://bootstrapious.com/p/bootstrap-sidebar
我希望我的布局如下:
黑色栏是使用负边距隐藏的导航，当左侧栏被隐藏时，顶部栏的宽度会增加。空白区域用于我的内容，这些内容将进入 Bootstrap 网格的容器。
但是目前我的布局是这样的:
蓝色条向右 flex 但没有到达页面顶部
我的 HTML:
</head>
<div class="wrapper">
<header class="skin-josh">
<nav id="sidebar">
<div class="page-sidebar sidebar-nav">
<li class="active">
@if(isset($id))
@include('layouts._leftmenu')
@else
@include('layouts._leftmenu_noproject')
@endif
</li>
</div>
</nav>
</header>
<nav class="navbar fixed-top navbar-light bg-light" role="navigation">
@if (session()->get('projectname'))
<h3 style="float:left;color:white;padding-left:25px;">{{ session()->get('projectname') }}</h3>
@endif
<div class="burgernav" style="float:left;height:65px;padding-left: 5px;">
<button class="btn btn-secondary" type="button" id="sidebarCollapse" style="background-color:rgb(0, 131, 185);color:white;height:65px;">
<i class="fas fa-bars fa-lg"></i>
</button>
</div>
</nav>
<body id="content">
@yield('content')
</body>
</div>
我的 CSS:
wrapper {
display: flex;
align-items: stretch;
}
#sidebar {
min-width: 150px;
max-width: 150px;
min-height: 100vh;
vertical-align : top;
}
#sidebar.active {
margin-left: -150px;
}
.sidebar {
min-height: 92.58vh;/*100vh;*/
display: block;
width: 150px;
}
.left-side{
width:150px;
min-height:100vh;
}
.navbar {
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 0;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
最佳答案
可以将黑色div设置为position: fixed，然后在header包裹下面的所有div之后新建一个div，margin-left等于黑色的宽度分区
之后 .wrapper 中不需要 display: flex。
关于html - 如何在左侧导航栏中使用topnav，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56704931/