色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

缺少引導下拉子菜單

CSS
錢良釵2年前8瀏覽0評論

Bootstrap 3還在RC，但我只是想實現它。我不知道如何放置一個子菜單類。甚至css中沒有類，甚至新的文檔也沒有提到它

它出現在2.x中，類名是下拉子菜單

引導數據庫5(2023年更新)

添加一些JavaScript來防止父下拉菜單打開時子菜單關閉。這可以通過切換顯示:塊來完成...

let dropdowns = document.querySelectorAll('.dropdown-toggle')
dropdowns.forEach((dd)=>{
    dd.addEventListener('click', function (e) {
        var el = this.nextElementSibling
        el.style.display = el.style.display==='block'?'none':'block'
    })
})

Bootstrap 5多級下拉單擊 Bootstrap 5多級下拉懸停 Bootstrap 5多級下拉懸停和。動畫過渡

或者，您可以將這個僅用于CSS的方法用于導航條下拉菜單...

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}

.navbar-nav li:hover > ul.dropdown-menu {
    display: block;
}

引導5導航條下拉懸停子菜單(僅CSS)

引導數據庫4(2018年更新)

在Bootstrap 3 RC中，下拉子菜單已被刪除。用Bootstrap作者馬克·奧托的話說..

"子菜單現在還沒有在網絡上占有一席之地，尤其是移動網絡。它們將被3.0 & quothttps://github.com/twbs/bootstrap/pull/6342

但是，用一點額外的CSS就可以得到相同的功能。

懸停時的導航欄子菜單:

.navbar-nav li:hover > ul.dropdown-menu {
    display: block;
}
.dropdown-submenu {
    position:relative;
}
.dropdown-submenu>.dropdown-menu {
    top:0;
    left:100%;
    margin-top:-6px;
}

導航條子菜單下拉懸停 導航欄子菜單下拉懸停(右對齊) 導航欄子菜單下拉單擊(右對齊) 導航條下拉懸停(無子菜單)

自舉3

這里有一個使用引導3的例子:https://codeply.com/p/T9FWGhhL0S

半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)

.dropdown-submenu {
    position:relative;
}
.dropdown-submenu>.dropdown-menu {
    top:0;
    left:100%;
    margin-top:-6px;
    margin-left:-1px;
    -webkit-border-radius:0 6px 6px 6px;
    -moz-border-radius:0 6px 6px 6px;
    border-radius:0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
    display:block;
}
.dropdown-submenu>a:after {
    display:block;
    content:" ";
    float:right;
    width:0;
    height:0;
    border-color:transparent;
    border-style:solid;
    border-width:5px 0 5px 5px;
    border-left-color:#cccccc;
    margin-top:5px;
    margin-right:-10px;
}
.dropdown-submenu:hover>a:after {
    border-left-color:#ffffff;
}
.dropdown-submenu.pull-left {
    float:none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
    left:-100%;
    margin-left:10px;
    -webkit-border-radius:6px 0 6px 6px;
    -moz-border-radius:6px 0 6px 6px;
    border-radius:6px 0 6px 6px;
}

示例標記

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">  
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav">
                <li class="menu-item dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Drop Down<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li class="menu-item dropdown dropdown-submenu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 1</a>
                            <ul class="dropdown-menu">
                                <li class="menu-item ">
                                    <a href="#">Link 1</a>
                                </li>
                                <li class="menu-item dropdown dropdown-submenu">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 2</a>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <a href="#">Link 3</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>

附注:導航條中調整左邊位置的例子:https://codeply.com/p/XEiERVGcmz

@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/

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

我在谷歌上搜索了響應式導航菜單，發現這是我認為最好的。

這是智能菜單http://www.smartmenus.org/

我希望這是任何想要多級子菜單導航菜單的人的出路。

更新2015-02-17智能菜單現在完全支持子菜單的引導元素樣式。欲了解更多信息，請訪問智能菜單網站。

在Bootstrap 5中，由于新的autoClose選項和dropend類，現在無需使用任何javascript代碼就可以非常容易地實現下拉子菜單。

現場演示:https://jsfiddle.net/b038kc2y/

.dropdown-menu .dropdown-menu {
  top: -.5rem !important;
}

<div class="dropdown m-5">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
    Dropdown link
  </a>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <li class="dropend">
      <a class="dropdown-item" href="#" id="dropdownSubMenuLink" data-bs-toggle="dropdown" aria-expanded="false">Submenu Action</a>
      <ul class="dropdown-menu" aria-labelledby="dropdownSubMenuLink">
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
      </ul>
    </li>
  </ul>
</div>

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:從背景色:#eeeeee到背景色:#c5c5c5 -白色字體& amp淺色背景看起來不太好。

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

我希望這能像對我一樣幫助人們！

但是我希望Bootstrap盡快把潛艇功能加回來。

對Skelly真正有用的解決方法的注釋:在Bootstrap-sass 3.3.6，utilities.scss，第19行:。向左拉有浮動:左！重要。既然如此，我推薦使用！在他的CSS中也很重要:

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

幾天前我碰到了這個問題。我嘗試了許多解決方案，沒有一個真正適合我，最后我創建了一個擴展/覆蓋bootstrap的下拉代碼。它是對closeMenus函數進行了更改的原始代碼的副本。

我認為這是一個好的解決方案，因為它不會影響bootstrap js的核心類。

你可以在gihub:https://github.com/djokodonev/bootstrap-multilevel-dropdown上查看

超文本標記語言

<!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>

半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)

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

2022年對于Bootstrap 5，這個GitHub repo上的這個JS代碼是子菜單的終極解決方案:https://GitHub . com/Dallas Lu/Bootstrap-5-multi-level-drop down。

這是我的解決方案(我使用bootstrap 5):

超文本標記語言

<div class="btn-group dropend" role="group">
    <button id="submenu" type="button" class="dropdown-item  dropdown-toggle submenu" data-bs-toggle="dropdown" aria-expanded="false">
        Menu Item
    </button>
    <div class="dropdown-menu" aria-labelledby="submenu">
        <a class="dropdown-item">Submenu</a>
    </div>
</div>

射流研究…

$('.submenu').click(function(e){
    e.preventDefault();
    e.stopPropagation();
});

我為下拉菜單做了另一個解決方案。希望這是有幫助的 只需添加這個js腳本

<script type="text/javascript"> jQuery("document").ready(function() {
  jQuery("ul.dropdown-menu > .dropdown.parent").click(function(e) {
    e.preventDefault();
    e.stopPropagation();
    if (jQuery(this).hasClass('open2'))
      jQuery(this).removeClass('open2');
    else {
      jQuery(this).addClass('open2');
    }

  });
}); < /script>

<style type="text/css">.open2{display:block; position:relative;}</style>