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

【问题标题】：How to make Bootstrap split button dropdown look like a standard dropdown in a collapsed navbar如何使 Bootstrap 拆分按钮下拉菜单看起来像折叠导航栏中的标准下拉菜单
【发布时间】：2021-08-23 14:23:05
【问题描述】：

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

我正在使用 Bootstrap 5.0.2。

我找到this suggestion 将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>

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

【问题讨论】：

标签： javascript html jquery css bootstrap-5

【解决方案1】：

好吧，我不知道这是否是最好的解决方案，但我想出了一些可行的方法。我添加了以下 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();
})

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

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

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

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

【讨论】：