Bootstrap/Bootswatch 下拉选项卡不显示

Bootstrap/Bootswatch Dropdown Tab Does Not Display

我在实现带有下拉导航的选项卡时遇到问题,如 Bootswatch examples 中所示。我应该注意,这对我来说在演示页面上不起作用,但它的编写方式似乎暗示它应该起作用。

我的最终目标是在我的一个选项卡上有一个下拉菜单并根据所做的选择填充选项卡正文。其他选项卡按预期工作,但下拉菜单未显示预期的 div 内容。

下面基本上是来自 Bootswatch 页面的演示代码,为了简化它,去掉了一些多余的内容。

<!doctype html>
<html lang="en" class="h-100">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Title</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootswatch/4.4.1/cerulean/bootstrap.min.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
</head>

<body class="d-flex flex-column h-100">

    <header>
        <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
            <a class="navbar-brand" href="/">Title</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01"
                aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarColor01">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="#">Settings <span class="sr-only">(current)</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Help</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">About</span></a>
                    </li>
                </ul>
            </div>
        </nav>
    </header>

    <main role="main" class="flex-shrink-0">
        <div class="container" id="settingsapp">

            <div class="page-header" id="banner">
                <h1>Settings</h1>
            </div>
            <ul class="nav nav-tabs">
                <li class="nav-item">
                    <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#profile">Profile</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button"
                        aria-haspopup="true" aria-expanded="false">Dropdown</a>
                    <div class="dropdown-menu" style="">
                        <a class="dropdown-item" data-toggle="tab" href="#dropdown1">Action</a>
                        <a class="dropdown-item" data-toggle="tab" href="#dropdown2">Another action</a>
                    </div>
                </li>
            </ul>
            <div id="myTabContent" class="tab-content">
                <div class="tab-pane fade show active" id="home">
                    <p>Home tab content.</p>
                </div>
                <div class="tab-pane fade" id="profile">
                    <p>Profile tab content.</p>
                </div>
                <div class="tab-pane fade" id="dropdown1">
                    <p>Dropdown 1 content.</p>
                </div>
                <div class="tab-pane fade" id="dropdown2">
                    <p>Dropdown 2 content.</p>
                </div>
            </div>
        </div>
    </main>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

</body>

</html>

我使用 Bootstrap 和 Bootswatch 的能力仅限于找到满足我需要的东西,然后将其编辑成我想要的样子,所以这有点超出我的理解范围。然而,我每次都在学习。

Bootstrap 通常包含 Jquery.js 和 bootstrap.js <script> 标签,用于处理用户交互。我想你可能会错过那些。

<head>
<meta charset="utf-8">
<title>Bootswatch: Cerulean</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="../4/cerulean/bootstrap.css" media="screen">
<link rel="stylesheet" href="../_assets/css/custom.min.css">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" ></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" ></script>

合作者帮助我解决了这个问题。我在下拉菜单 div:

中缺少 "data-toggle" 参数
<div class="dropdown-menu" style="">
    <a class="dropdown-item" href="#dropdown1">Action</a>
    <a class="dropdown-item" href="#dropdown2">Another action</a>
</div>

变为:

<div class="dropdown-menu" style="">
    <a class="dropdown-item" data-toggle="tab" href="#dropdown1">Action</a>
    <a class="dropdown-item" data-toggle="tab" href="#dropdown2">Another action</a>
</div>

现在我想我会看看如何在 Bootswatch 上提交 PR,因为这来自他们的示例。

我已经编辑了上面的问题以包含更正后的 HTML。