时间戳

首页 > 解决方案 > 如何使 Bootstrap 拆分按钮下拉菜单看起来像折叠导航栏中的标准下拉菜单

javascript - 如何使 Bootstrap 拆分按钮下拉菜单看起来像折叠导航栏中的标准下拉菜单

问题描述

我正在尝试制作一个包含拆分下拉按钮的导航栏，但是当屏幕很窄并且导航栏在切换开关后面折叠时它看起来不对，或者当屏幕很宽并且导航栏没有折叠时它看起来不对。

我正在使用 Bootstrap 5.0.2。

我发现了将类添加到按钮组的建议d-table，在垂直模式下看起来不错，但在水平模式下却不行，如下所示：

带有 d-table 的折叠导航栏

带有 d-table 的宽导航栏

如果我在按钮组中没有 d-table 类，它在垂直模式下看起来很奇怪，在水平模式下看起来很好，如下所示：

没有 d-table 的折叠导航栏

没有 d-table 的宽导航栏

作为参考，我希望它在小屏幕上看起来像这样，只需使用拆分按钮：

折叠导航栏中的标准下拉菜单

一种可能的解决方案是使用 Javascript 根据屏幕宽度添加/删除 d-table 类，但我想避免对屏幕宽度值进行硬编码。如果有某种方法可以检测导航栏何时崩溃，那也可以。

这是我用于此示例的代码：

CSS：


.dropdown-toggle-split {
    border: none;
    outline: none;
    position: relative;
}

.dropdown-toggle-split::before {
    background: #444444;
    position: absolute;
    content: "";
    left: 0;
    bottom: 25%;
    height: 50%;
    width: 1px;
    box-sizing: content-box;
}

.dropdown-toggle-split {
    padding-left: .5rem !important;
}

.dropdown-link {
    padding-right: .5rem !important;
}

main > .container {
    padding-top: 60px;
}

HTML：

<!DOCTYPE html>
<html lang="en" class="h-100">
<head>
    <!-- Meta -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
          crossorigin="anonymous">


    <!-- Page -->
    <title>Split Button Dropdown</title>
</head>
<body class="d-flex flex-column h-100">
<header>
    <nav class="navbar navbar-expand-md navbar-light ap-bg-light fixed-top">
        <div class="container-fluid">
            <a class="navbar-brand" href="">
                TEST
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item dropdown">
                        <div class="btn-group d-table"> <!-- This is the d-table class that I've been adding/removing -->
                            <a class="nav-link d-inline active dropdown-link"
                               href="https://stackoverflow.com/">Clickable link</a>
                            <div class="nav-link d-inline active dropdown-toggle dropdown-toggle-split"
                                 id="navbarDropdown" role="button" data-bs-toggle="dropdown"
                                 aria-expanded="false" aria-haspopup="true">
                            </div>

                            <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
                                <li><a class="dropdown-item" href="#">
                                    List item</a></li>
                                <li><a class="dropdown-item"
                                       href="#">
                                    List item</a></li>
                                <li><a class="dropdown-item"
                                       href="#">
                                    List item</a></li>
                                <li><a class="dropdown-item"
                                       href="#">
                                    List item</a></li>
                                <li><a class="dropdown-item" href="#">
                                    List item</a></li>
                            </ul>
                        </div>
                    </li> <!-- nav-item dropdown -->
                    <li class="nav-item">
                        <a class="nav-link active"
                           href="#">Another link</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active"
                           href="#">Final link</a>
                    </li>
                </ul>
                <!-- Search box -->
                <form class="d-flex search">
                    <input class="form-control me-2 term" type="search" placeholder="Search"
                           aria-label="Search">
                    <button class="btn btn-outline-success" type="submit">
                        Search
                    </button>
                </form>
            </div>
        </div>
    </nav>
</header>

<!-- Page content -->
<main class="flex-shrink-0">
    <div class="container">

    </div>
</main>

<!-- JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>
</body>
</html>

如果有人有任何建议或知道现有答案，将不胜感激！

标签： javascripthtmljquerycssbootstrap-5

解决方案

好吧，我不知道这是否是最好的解决方案，但我想出了一些可行的方法。我添加了以下 Javascript，用于检测导航栏何时折叠并更新 DOM：

function checkNavBar() {
    let dropdownWrapper = $('#dropdownWrapper')
    if ($('#navToggle').is(':visible')) {
        dropdownWrapper.addClass("d-table");
    } else {
        dropdownWrapper.removeClass("d-table");
    }
}

$(window).resize(function () {
    checkNavBar();
})

$(window).ready(function () {
    checkNavBar();
})

第一个函数使用 JQueryis()函数来测试导航栏切换按钮是否可见，并且在调整窗口大小和加载页面时调用该函数。

为了使下拉菜单扩展为全宽，我添加了一些 CSS，仅选择作为所示子项的按钮组.navbar-collapse：

.navbar-collapse.show .btn-group {
    width: 100%;
}

不是世界上最优雅的解决方案，但它似乎有效。

推荐阅读