时间戳

首页 > 解决方案 > 导航栏标题有问题，如何解决？

html - 导航栏标题有问题，如何解决？

问题描述

我的导航栏有问题。我想在下拉部分“3”下设置我想设置几个菜单点。作为示例链接 4
不幸的是，我无法在我的代码中处理这个......引导程序是否可能无法处理这个？
在此处输入图像描述

你能给我一个例子，我如何解决这个问题，我附上了我的代码。

      <!DOCTYPE html>
            <html lang="en">
            <head>
              <title>Bootstrap Example</title>
              <meta charset="utf-8">
              <meta name="viewport" content="width=device-width, initial-scale=1">
              <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
              <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
              <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
              <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
            </head>
            <body>
            
            <div class="container">
              <h2>Pills with Dropdown</h2>
              <ul class="nav nav-pills">
                <li class="nav-item">
                  <a class="nav-link active" href="#">Active</a>
                </li>
                <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
                  <div class="dropdown-menu">
                <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown2</a>
                  <div class="dropdown-menu">  
                    <a class="dropdown-item" href="#">Link 3</a>
                    <ul class="nav nav-pills">
                    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown3</a>
                  <div class="dropdown-menu">  
                    
                   <a class="dropdown-item" href="#">Link 4</a></ul>
            
                  
                    </div></div></div>
             
            </body>
            </html>

标签： htmlcsstwitter-bootstrapbootstrap-4

解决方案

<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
  @media (min-width: 992px){
    .dropdown-menu .dropdown-toggle:after{
        border-top: .3em solid transparent;
        border-right: 0;
        border-bottom: .3em solid transparent;
        border-left: .3em solid;
    }
    .dropdown-menu .dropdown-menu{
        margin-left:0; margin-right: 0;
    }
    .dropdown-menu li{
        position: relative;
    }
    .nav-item .submenu{ 
        display: none;
        position: absolute;
        left:100%; top:-7px;
    }
    .nav-item .submenu-left{ 
        right:100%; left:auto;
    }
    .dropdown-menu > li:hover{ background-color: #f1f1f1 }
    .dropdown-menu > li:hover > .submenu{
        display: block;
    }
}
</style>
</head>

<body>
  <h1>Pills With DropDown</h1>
  <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main_nav">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="main_nav">
    
    <ul class="navbar-nav">
    <li class="nav-item"> <a class="nav-link" href="#"> Active </a> </li>
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown"> DropDown  </a>
        <ul class="dropdown-menu">
        <li><a class="dropdown-item dropdown-toggle" href="#"> Second level 2</a>
         <ul class="submenu dropdown-menu">
            <li><a class="dropdown-item" href=""> Third level 1</a></li>
            <li><a class="dropdown-item" href=""> Third level 2</a></li>
            <li><a class="dropdown-item dropdown-toggle" href=""> Third level 3</a>
          <ul class="submenu dropdown-menu">
              <li><a class="dropdown-item" href=""> Fourth level 1</a></li>
              <li><a class="dropdown-item" href=""> Fourth level 2</a></li>
          </ul>
            </li>
         </ul>
        </li>
        <li><a class="dropdown-item" href="#"> Dropdown item 3 </a></li>
        <li><a class="dropdown-item" href="#"> Dropdown item 4 </a>
        </ul>
    </li>
    <li class="nav-item"> <a class="nav-link" href="#"> First level 1 </a> </li>
    <li class="nav-item"> <a class="nav-link" href="#"> First level 2 </a></li>
    </ul>
    
    </div> <!-- navbar-collapse.// -->
    </nav>
</body>
<script>
  // Prevent closing from click inside dropdown
$(document).on('click', '.dropdown-menu', function (e) {
  e.stopPropagation();
});

// make it as accordion for smaller screens
if ($(window).width() < 992) {
  $('.dropdown-menu a').click(function(e){
    e.preventDefault();
      if($(this).next('.submenu').length){
        $(this).next('.submenu').toggle();
      }
      $('.dropdown').on('hide.bs.dropdown', function () {
     $(this).find('.submenu').hide();
  })
  });
}
</script>
</html>

推荐阅读