我一直在试着遵循下面的指南:
https://bootstrapious.com/p/bootstrap-sidebar
我希望我的布局如下:
html - 如何在左侧导航栏上使用topnav-LMLPHP
如果黑色条是使用负边距隐藏的导航,则当左侧条隐藏时,顶部条的宽度会增加。空白处是我的内容,它进入一个用于引导网格的容器。
不管我现在的布局是这样的:
html - 如何在左侧导航栏上使用topnav-LMLPHP
蓝色的弯曲条在右边,但不在页首
我的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

07-24 09:44
查看更多