我一直在试着遵循下面的指南:
https://bootstrapious.com/p/bootstrap-sidebar
我希望我的布局如下:
如果黑色条是使用负边距隐藏的导航,则当左侧条隐藏时,顶部条的宽度会增加。空白处是我的内容,它进入一个用于引导网格的容器。
不管我现在的布局是这样的:
蓝色的弯曲条在右边,但不在页首
我的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
,然后在头后创建一个新div,将所有div包装在它下面,左边距等于黑色div的宽度。
在那之后不需要display: flex
中的.wrapper
。