引导程序: 创建可折叠的导航栏下拉菜单

引导程序版本: v4.3

以下内容放在.html文件的中:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

以下内容放在.html文件的的末尾:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
    crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
    crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <!-- brand -->
    <a class="navbar-brand" href="#">Brand Name</a>
    <!-- nav items -->
    <div class="collapse navbar-collapse">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <!-- main menu item -->
                <a class="nav-link" href="#" role="button" data-toggle="collapse" data-target="#DropdownContent"
                    aria-expanded="false">Link</a>
                <!-- dropdown menu -->
                <div class="collapse" id="DropdownContent">
                    <div class="dropdownItems">
                        <div class="dropdown-divider"></div>
                        <a href="#Toner">Action 1</a>
                        <a href="#">Action 2</a>
                        <a href="#">Action 3</a>
                    </div>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Another Link</a>
            </li>
        </ul>
    </div>
</nav>

data-toggle =“崩溃” data-target =“#DropdownContent”

.dropdownItems a {
    display: block;  /* 设置成block元素，则每行只显示一个<a> */
    text-decoration: none; /* 去掉<a>的下划线 */
    color: rgba(255, 255, 255, 0.5);
    font-size: medium;
}
.dropdownItems a:hover {
    color: #cbd3da;
}

在设置以下样式之前，展开下拉菜单将导致主菜单项发生移位，包括:

引导程序中导航栏的本质是一个flexboxbootstrap下拉菜单样式，因此您可以使用flexbox中的align-items属性来控制主菜单项的位置. 代码实现:

.navbar {
    align-items: baseline;
/* 或者使用下面的指令，效果相同 */
/* align-items: flex-start; */
}

链接展开后，其下方的下拉菜单的宽度大于链接本身的宽度bootstrap下拉菜单样式，因此，主菜单中链接的宽度被迫增加，从而将“另一个链接”推向左侧. 解决方案是预设“链接”的最小宽度，并确保它大于下拉菜单的宽度. 代码实现:

.nav-item {
    min-width: 80px;
}

展开的导航栏覆盖了部分主要内容，因此请向下移动主要内容. 您可以设置主要内容的顶部.

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/ruanjian/article-147881-1.html