Question

我一直在尝试遵循以下指南： 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);
}

Answer 1

您可以将黑色div设置为具有position: fixed，然后在标头将其下面的所有div包裹起来之后创建一个新的div，其左边距等于黑色div的宽度。并且此后不需要display: flex中的.wrapper。

如何在左侧导航栏上使用topnav

1 个答案: