html - 在 bootstrap 4 中用顶部导航覆盖左侧垂直导航

Question

我正在尝试使用 bootstrap 4 构建管理 UI，其中我有两个菜单。一个垂直，另一个在顶部栏。我想让导航变成这样:

在这样做的同时，我在我的 html 代码中尝试了这样的事情:

<div class="dashboard">
    <nav class="navbar navbar-expand-sm bg-white">
        <ul class="navbar-nav mr-auto">
        </ul>
        <ul class="navbar-nav">
            <li class="nav-item">
                <a href="#" class="nav-link">Test 1</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">Test 2</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">Test 3</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Dropdown
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                </div>
            </li>
        </ul>
    </nav>

    <div class="nits-nav-left-aside bg-white">
        <nav class="navbar navbar-light navbar-expand-sm px-0 flex-row flex-nowrap">
            <ul class="nav flex-sm-column flex-row">
                <li class="nav-item">
                    <a href="#" class="nav-link">Side 1</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Side 2</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Side 3</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownSideMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Side
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdownSideMenuLink">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                    </div>
                </li>
            </ul>
        </nav>
    </div>
</div>

在 CSS 部分我使用了这样的东西:

.dashboard {
    color: #0a0302;
    height: 100%;
    background-color: #EAEDED;
 }

 nav {
    vertical-align: top;
    height: 70px;
    box-shadow: 0 4px 25px rgba(0,0,0,.2);
 }

 .nits-nav-left-aside {
    top: 0;
    left: 0;
    position: absolute;
    padding: 0;
    width: 70px;
    height: 100%;
    z-index: 10;
  }

 .nits-nav-left-aside > nav > ul {
    top: 100px;
  } 

但是我的 UI 看起来像这样:

供您引用，这是查看布局的链接:http://demo.nitseditor.com/html#/dashboard

帮我解决这些问题。

Answer 1

你已经给 nav 一个固定的 70px 高度，这会产生一个问题尝试给个别类而不是 nav