具有多个拆分导航的 Bootstrap 4 Navbar 不会折叠

Posted 2023-05-08

【中文标题】具有多个拆分导航的 Bootstrap 4 Navbar 不会折叠

【英文标题】：Bootstrap 4 Navbar with multiple split navs doesn't collapse

【发布时间】：2018-12-26 17:26:17

【问题描述】：

在此版本中，只有第一个菜单项显示在平板电脑菜单中。当我添加样式 display:flex;到#navbarsExampleDefault，它显示了其他项目，但是我无法折叠/隐藏菜单项。添加可见性：隐藏；只是隐藏菜单项但占用相同的空间。我只包括一个菜单项以保持简短。

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="icon" href="#">
    <title>Home</title>
    <!--BOOTSTRAP-->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i|Roboto:300,300i,400,400i" rel="stylesheet">

            <button class="btn btn-link navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"   focusable="false"><title>Menu</title><path stroke="currentColor" stroke- stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"></path></svg>
            </button>

            <!-- SPLIT NAVBARS -->
            <div class="btn-group navbar-collapse collapse" id="navbarsExampleDefault">
              <button type="button" class="btn" id="button-1"><a href="csr-lfg.html">CSR at LF</a></button>
              <button type="button" class="btn dropdown-toggle dropdown-toggle-split" id="button-1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="sr-only">Toggle Dropdown</span>
              </button>
              <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Submenu Item 1</a>
                <a class="dropdown-item" href="#">Submenu Item 2</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Submenu Item 3</a>
                <a class="dropdown-item" href="#">Submenu Item 4</a>
                <a class="dropdown-item" href="#">Submenu Item 5</a>
                <a class="dropdown-item" href="#">Submenu Item 6</a>
              </div>
            </div>

【问题讨论】：

我建议你阅读minimal reproducible example。

【参考方案1】：

你错过了 bootstrap.js 和 pooper.js 你可以找到更多信息 aboit dropdown (for button ) here

 <link rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" />
    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i|Roboto:300,300i,400,400i" rel="stylesheet">
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
 <script src="Scripts/jquery-1.10.2.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <!-- SPLIT NAVBARS -->
        <div class="collapse navbar-collapse" id="navbarsExampleDefault">
            <button type="button" class="btn" id="button-1"><a href="csr-lfg.html">CSR at LF</a></button>
            <button type="button" class="btn dropdown-toggle dropdown-toggle-split" id="button-1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="sr-only">Toggle Dropdown</span>
            </button>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Submenu Item 1</a>
                <a class="dropdown-item" href="#">Submenu Item 2</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Submenu Item 3</a>
                <a class="dropdown-item" href="#">Submenu Item 4</a>
                <a class="dropdown-item" href="#">Submenu Item 5</a>
                <a class="dropdown-item" href="#">Submenu Item 6</a>
            </div>
        </div>
        </nav>

【讨论】：

您是否在正文末尾加载了任何脚本来完成这项工作？