Bootstrap CSS有选择地应用/不加载？答案

【问题标题】：Bootstrap CSS selectively applying/not loading?Bootstrap CSS有选择地应用/不加载？
【发布时间】：2021-07-05 20:34:51
【问题描述】：

我有一个导航栏，我目前正在尝试向其中添加子菜单。样式等适用于引导程序，但似乎引导程序提供的某些操作实际上并未应用于标题。

在 bootstrap 的网站上，他们有这个 sn-p：

<ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true"> <span class="nav-label">Services</span> <span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="#">Service A</a></li>
                <li><a href="#">Service B</a></li>
                <li class="dropdown-submenu">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <span class="nav-label">Service C</span><span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Service C1</a></li>
                        <li><a href="#">Service C2</a></li>
                        <li><a href="#">Service C3</a></li>
                        <li><a href="#">Service C4</a></li>
                        <li><a href="#">Service C5</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>

我已经应用了这个，而菜单看起来像这样：

它实际上最终看起来像这样（减去颜色样式）：

注意插入符号的定位和旋转方式不同，悬停不会导致子菜单弹出。

我已经检查了我所有的自定义 CSS，并且没有没有修改子菜单类。出于某种原因，这让我感到有些事情正在发生，我完全没有想法。

如果我从 bootstrap 示例中完全复制 css，然后会显示子菜单，但是我已经在 bootstrap 中加载，所以这不是必需的......这是我加载它的方式：

<head>
    <link rel="stylesheet" href="/assets/bootstrap-3.3.7-dist/css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="/assets/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <link rel="stylesheet" type="text/css" href="/assets/css/global.css?v=21">
    <link rel="stylesheet" type="text/css" href="/assets/css/header.css">
    <link rel="stylesheet" type="text/css" href="/assets/css/footer.css">
    <link href='https://fonts.googleapis.com/css2?family=Montserrat' rel='stylesheet' type='text/css'>
</head>

header.css 和 footer.css 各只有几行，都与此无关。就像我说的那样，我已经搜索了整个global.css，并且没有与此相关的内容。只是一个color 属性。

显然标题在某种意义上是引导程序，因此部分正在应用引导程序，但这个子菜单的东西显然不是。

JsFiddle：https://jsfiddle.net/qfLt8h1j/

如果有人有任何想法，那就太好了。在这一点上，我不知所措。

【问题讨论】：

我认为是因为你没有加载 popperjs。
你能做一个jsfiddle吗？
在问题中添加了一个 jsfiddle
您发布的代码示例来自Bootstrap Essentials，与Bootstrap不同。如果您想使用该子菜单设置，请访问 Essentials 的站点并下载他们的 CSS 和 JS 文件并使用他们的模板作为您的起点（我将他们的文件添加到您页面的本地副本中，一切正常）。如果您想使用较新版本的 Bootstrap（4.6.0 而不是 3.3.7），那么这个答案可能会帮助您做多级菜单：stackoverflow.com/a/61332652/1011984。
我没有意识到引导程序的基本要素和引导程序是不同的东西。我下载了 bootstrap Essentials 的 css 和 js（现在通过 <link rel="stylesheet" href="/assets/bootstrap-3.3.7-dist/css/bootstrap.css"> 和 <script src="/assets/bootstrap-3.3.7-dist/js/bootstrap.js"></script> 导入它们，我仍然遇到子菜单没有扩展的问题：/我用这些更新了我的问题。

标签： javascript html jquery css twitter-bootstrap

【解决方案1】：

bootstrap 3 本身不支持此功能。

你需要做这样的事情：

标记：

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Brand</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-navbar-collapse-1">
        <ul class="nav navbar-nav">
            <li><a href="index.php">Home</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                <ul class="dropdown-menu">
                     <li><a href="#">Menu Item</a></li>
                     <li><a href="#">Menu Item</a></li>
                     <li class="dropdown-submenu">
                         <a tabindex="-1" href="#" class="dropdown-submenu-toggle">Second Dropdown <b class="caret"></b></a>
                         <ul class="dropdown-menu">
                             <li><a href="#">Sub-Menu Item</a></li>
                             <li><a href="#">Sub-Menu Item</a></li>
                             <li><a href="#">Sub-Menu Item</a></li>
                         </ul>
                     </li>
                     <li><a href="#">Menu Item</a></li>
                     <li><a href="#">Menu Item</a></li>
                 </ul>
             </li>
         </ul>
     </div><!-- /.navbar-collapse -->
  </div><!-- /container -->
</nav>

css:

.dropdown-submenu{position: relative;}
.dropdown-submenu .caret{-webkit-transform: rotate(-90deg); transform: rotate(-90deg);}
.dropdown-submenu > .dropdown-menu {top:0; left:100%; margin-top:-6px; margin-left:-1px;}
.dropdown-submenu.open > a:after{border-left-color:#fff;}
.dropdown-submenu.open > .dropdown-menu, .dropdown-submenu.open > .dropdown-menu {display: block;}
.dropdown-submenu .dropdown-menu{margin-bottom: 8px;}
.navbar-default .navbar-nav .open .dropdown-menu .dropdown-submenu ul{background-color: #f6f6f6;}
.navbar-inverse .navbar-nav .open .dropdown-menu .dropdown-submenu ul{background-color:#333;}
.navbar .navbar-nav .open .dropdown-submenu .dropdown-menu > li > a{padding-left: 30px;}
@media screen and (min-width:992px){
    .dropdown-submenu .dropdown-menu{margin-bottom: 2px;}
    .navbar .navbar-nav .open .dropdown-submenu .dropdown-menu > li > a{padding-left: 25px;}
    .navbar-default .navbar-nav .open .dropdown-menu .dropdown-submenu ul{background-color:#fff;}
    .navbar-inverse .navbar-nav .open .dropdown-menu .dropdown-submenu ul{background-color:#fff;}
}

js:

// Make Dropdown Submenus possible
$('.dropdown-submenu a.dropdown-submenu-toggle').on("click", function(e){
    $('.dropdown-submenu ul').removeAttr('style');
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
});
// Clear Submenu Dropdowns on hidden event
$('#bs-navbar-collapse-1').on('hidden.bs.dropdown', function () {
    $('.navbar-nav .dropdown-submenu ul.dropdown-menu').removeAttr('style');
});

可选的悬停支持：

$( document ).ready(function() { 

   // Make Secondary Dropdown on Hover
   $('.dropdown-submenu a.dropdown-submenu-toggle').hover(function(){
      $('.dropdown-submenu ul').removeAttr('style');
      $(this).next('ul').toggle();
   });
 
   // Make Regular Dropdowns work on Hover too
   $('.dropdown a.dropdown-toggle').hover(function(){
      $('.navbar-nav .dropdown').removeClass('open');
      $(this).parent().addClass('open');
   });
});

取自here

另外，考虑升级一下，bootstrap 已经是第 5 版了！

【讨论】：

谢谢！我没有意识到这需要额外的代码，但它做到了！