引导下拉子菜单缺失

引导3仍然在RC，但我只是试图实现它。我不知道怎么放一个子菜单类。甚至css中没有类，甚至新的文档也没有提到它

2分钟就到了。用类名作为下拉菜单

当前回答

评论Skelly的真正有用的解决方案:在Bootstrap-sass 3.3.6，实用程序。Scss，第19行:.pull-left有float:left !重要。因此，我建议在他的CSS中也使用!important:

.dropdown-submenu.pull-left {
    float:none !important;
}

2016-01-13 08:45:34

其他回答

@skelly解决方案是很好的，但不会在移动设备上工作，因为悬停状态不会工作。

我添加了一点JS来得到BS 2.3.2的行为。

PS:它将与你得到的CSS一起工作:http://bootply.com/71520尽管你可以评论以下部分:

CSS:

/*.dropdown-submenu:hover>.dropdown-menu{display:block;}*/

JS:

$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
  // Avoid following the href location when clicking
  event.preventDefault();
  // Avoid having the menu to close when clicking
  event.stopPropagation();
  // If a menu is already open we close it
  $('ul.dropdown-menu [data-toggle=dropdown]').parent().removeClass('open');
  // opening the one you clicked on
  $(this).parent().addClass('open');
});

结果可以在我的WordPress主题(页面顶部)上找到:http://shprinkone.julienrenaux.fr/

2013-09-08 10:31:29

Shprink的代码对我帮助最大，但为了避免下拉菜单离开屏幕，我将其更新为:

JS:

$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
    // Avoid following the href location when clicking
    event.preventDefault(); 
    // Avoid having the menu to close when clicking
    event.stopPropagation(); 
    // If a menu is already open we close it
    $('ul.dropdown-menu [data-toggle=dropdown]').parent().removeClass('open');
    // opening the one you clicked on
    $(this).parent().addClass('open');

    var menu = $(this).parent().find("ul");
    var menupos = $(menu).offset();

    if (menupos.left + menu.width() > $(window).width()) {
        var newpos = -$(menu).width();
        menu.css({ left: newpos });    
    } else {
        var newpos = $(this).parent().width();
        menu.css({ left: newpos });
    }

});

CSS: FROM background-color: #eeeeee TO background-color: #c5c5c5 -白色字体和浅色背景看起来不太好。

.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
  background-color: #c5c5c5;
  border-color: #428bca;
}

我希望这能像帮助我一样帮助别人!

但是我希望Bootstrap能尽快把subs功能加回来。

2013-09-29 10:25:43

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Dropdown Navbar</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">The Providers</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li ><a href="#">Home</a></li>
        <li  id="course" class="dropdown" ><a  href="#">Courses<span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">SEO</a></li>
          <li><a href="#">A.I</a></li>
          <li><a href="#">M.L</a></li>
          <li><a href="#">Graphics</a></li>
          <li id="sub-dropdown" class="dropdown"><a href="#">web Design<span style="margin-left: 43px;" class="glyphicon glyphicon-chevron-right"></span> </a>
        <ul id="sub-dropdown-menu" class="dropdown-menu">
          <li><a href="#">HTML</a></li>
          <li><a href="#">CSS</a></li>
          <li><a href="#">Bootstrap 3</a></li>
          <li><a href="#">JavaScript</a></li>
          <li><a href="#">Angular</a></li>
        </ul>
      </li>
          </li>
        </ul>
      </li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Contact us</a></li>
        <li><a href="#">Policy</a></li>
      </ul>
    </div>
  </div>
</nav>
</body>
</html>

CSS

body{
    font-family: monospace;
    outline: none;
    background-image: url(image.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
}
.navbar-inverse{
    background-color: #2a84eb ;
    border-color: transparent;
}

.navbar-inverse .navbar-brand{
    color: #fff;
    font-size: 30px;
    margin-right: 40px;
}

#myNavbar .navbar-nav li a{
    color: #fff;
    font-size: 19px;
}
#myNavbar #course{
    transition: all 0.3s ease-in-out;
}
#myNavbar #course:hover{
    background-color:#0751a6; 
}   
.dropdown-menu{
  display: none;
  position: absolute;
  background-color: #f0f0f0;
  box-shadow: 2px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

#sub-dropdown-menu{
display: none;
  position: absolute;
  background-color: #f0f0f0;
  margin-left: 186px;
  margin-top: -26px;
}

#sub-dropdown-menu a , .dropdown-menu a {
    color: #000 !important;
    font-size: 16px !important;
}

.dropdown:hover .dropdown-menu {display: block;transition: all 0.5s ease-in-out;}

.dropdown .dropdown-menu a:hover{background-color: #c9c7c7;}

#sub-dropdown:hover #sub-dropdown-menu {display: block;}

来源: https://www.youtube.com/watch?v=6CgnWhJ-amE

2021-10-15 12:09:43

评论Skelly的真正有用的解决方案:在Bootstrap-sass 3.3.6，实用程序。Scss，第19行:.pull-left有float:left !重要。因此，我建议在他的CSS中也使用!important:

.dropdown-submenu.pull-left {
    float:none !important;
}

2016-01-13 08:45:34

直到今天(2014年1月9日)Bootstrap 3仍然不支持子菜单下拉。

我搜索了谷歌关于响应式导航菜单，发现这是最好的。

它是智能菜单http://www.smartmenus.org/

我希望这是谁想要导航菜单多级子菜单的出路。

智能菜单现在完全支持子菜单的Bootstrap元素样式。欲了解更多信息，请查看智能菜单网站。

2014-01-09 06:55:46

引导下拉子菜单缺失

推荐文章

最新文章

标签