我喜欢知道如何更改bootstrap mega菜单下拉大小以适合引导容器宽度.
我下面附上一张图片,以便更好地了解我想要做的事情.
<nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">logo</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a href="#">Home</a></li> <li class="dropdown menu-large"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Product Listing <b class="caret"></b> </a> <ul class="dropdown-menu megamenu row"> <li> <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail"> <img src="http://placehold.it/150x120" /> </a> </div> <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail"> <img src="http://placehold.it/150x120" /> </a> </div> <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail"> <img src="http://placehold.it/150x120" /> </a> </div> <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail"> <img src="http://placehold.it/150x120" /> </a> </div> </li> </ul> </li> <li class="dropdown menu-large"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Categories <b class="caret"></b></a> <ul class="dropdown-menu megamenu row"> <li class="col-sm-3"> <ul> <li class="dropdown-header">Glyphicons</li> <li><a href="#">Available glyphs</a></li> <li class="disabled"><a href="#">How to use</a></li> <li><a href="#">Examples</a></li> <li class="divider"></li> <li class="dropdown-header">Dropdowns</li> <li><a href="#">Example</a></li> <li><a href="#">Aligninment options</a></li> <li><a href="#">Headers</a></li> <li><a href="#">Disabled menu items</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Button groups</li> <li><a href="#">Basic example</a></li> <li><a href="#">Button toolbar</a></li> <li><a href="#">Sizing</a></li> <li><a href="#">Nesting</a></li> <li><a href="#">Vertical variation</a></li> <li class="divider"></li> <li class="dropdown-header">Button dropdowns</li> <li><a href="#">Single button dropdowns</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Input groups</li> <li><a href="#">Basic example</a></li> <li><a href="#">Sizing</a></li> <li><a href="#">CheckBoxes and radio addons</a></li> <li class="divider"></li> <li class="dropdown-header">Navs</li> <li><a href="#">Tabs</a></li> <li><a href="#">Pills</a></li> <li><a href="#">Justified</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Navbar</li> <li><a href="#">Default navbar</a></li> <li><a href="#">Buttons</a></li> <li><a href="#">Text</a></li> <li><a href="#">Non-nav links</a></li> <li><a href="#">Component alignment</a></li> <li><a href="#">Fixed to top</a></li> <li><a href="#">Fixed to bottom</a></li> <li><a href="#">Static top</a></li> <li><a href="#">Inverted navbar</a></li> </ul> </li> </ul> </li> </ul> </div> </div> </nav>
Css代码如下
.menu-large { position: static !important; } .megamenu{ padding: 20px 0px; width:100%; } .megamenu> li > ul { padding: 0; margin: 0; } .megamenu> li > ul > li { list-style: none; } .megamenu> li > ul > li > a { display: block; padding: 3px 20px; clear: both; font-weight: normal; line-height: 1.428571429; color: #333333; white-space: normal; } .megamenu> li ul > li > a:hover,.megamenu> li ul > li > a:focus { text-decoration: none; color: #262626; background-color: #f5f5f5; } .megamenu.disabled > a,.megamenu.disabled > a:hover,.megamenu.disabled > a:focus { color: #999999; } .megamenu.disabled > a:hover,.megamenu.disabled > a:focus { text-decoration: none; background-color: transparent; background-image: none; filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); cursor: not-allowed; } .megamenu.dropdown-header { color: #428bca; font-size: 18px; }
我在navbar navbar-default navbar-fixed-top之后添加了一个容器类,但是这个容器不会将更改应用到下拉菜单中.
请看下面的JsFiddle.
任何帮助将被占用.
解决方法
编号:
BOOTPLY EXAMPLE
HTML
<div class="visible-xs menuStaMovil"> <nav id="menu" class="navbar navbar-default"> <div class="container-fluid" id="fullNav"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarBody" aria-expanded="false" id="collapsedNavbarExpand"> <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="index.html">logo</a> </div> <div class="collapse navbar-collapse menuMovil" id="navbarBody"> <ul class="nav navbar-nav"> <li class="dropdown"> <a href="#" class="dropdown-toggle navOption" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Tourism <span class="caret"> </span> </a> <ul class="dropdown-menu"> <li> <a href="../Pages/tourismHub.html"> <b> Tourism Hub </b> </a> </li> <li role="separator" class="divider"></li> <li> <a href="../Pages/eatingOut.html"> Eating Out </a> </li> <li> <a href="../Pages/attractions.html"> Attractions </a> </li> <li> <a href="../Pages/events.html"> Events </a> </li> <li> <a href="../Pages/history.html"> Town History </a> </li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle navOption" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Residents <span class="caret"> </span> </a> <ul class="dropdown-menu"> <li> <a href="../Pages/residentsHub.html"> <b> Residents Hub </b> </a> </li> <li role="separator" class="divider"></li> <li> <a href="../Pages/events.html"> Events </a> </li> <li> <a href="../Pages/eatingOut.html"> Eating Out </a> </li> <li> <a href="../Pages/history.html"> History </a> </li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle navOption" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Prospective Residents <span class="caret"> </span> </a> <ul class="dropdown-menu"> <li> <a href="../Pages/prospectiveResidentsHub.html"> <b> Prospective Residents Hub </b> </a> </li> <li role="separator" class="divider"></li> <li> <a href="../Pages/realEstate.html"> Real Estate </a> </li> <li> <a href="../Pages/attractions.html"> Attractions </a> </li> <li> <a href="../Pages/history.html"> Town History </a> </li> <li> <a href="../Pages/eatingOut.html"> Eating Out </a> </li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle navOption" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Locations <span class="caret"> </span> </a> <ul class="dropdown-menu"> <li> <a href="../Pages/locationsHub.html"> <b> Locations Hub </b> </a> </li> <li role="separator" class="divider"></li> <li> <a href="../Pages/marina.html"> Marina </a> </li> <li> <a href="../Pages/highStreet.html"> High Street </a> </li> <li> <a href="../Pages/parishWharf.html"> Parish Wharf </a> </li> <li> <a href="../Pages/lakeGrounds.html"> Lake Grounds </a> </li> </ul> </li> <li> <a href="../Pages/map.html" class="navOption"> Map </a> </li> </ul> </div> </div> </nav> </div> <div id="menuEstatic" class="navbar navbar-default navbar-static-top hidden-xs"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="navbar-collapse collapse"> <div class="container"><ul id="submenu" class="nav navbar-nav"> <li class="dropdownEstatic dropdown menu-large"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> INVESTIGAR <span class="glyphicon glyphicon-menu-down pull-right"></span> </a> <ul id="menuEstaticoFlecha" class="dropdown-menu megamenu"> <div class="container"> <li> <div class="col-sm-4 col-md-4"> <a href="#"> <div class="contenidoCajaPrincipal"> <div class="aaaa"> <div class="imagenMenuPrincipal pull-left"> <img alt="#" title="#" class="img-responsive" src="http://hdwallpaperspretty.com/wp-content/gallery/hd-background-1920x1080/1920x1080%20Wallpaper%20128.jpg"> </div> <div class="textoMenuPrincipal pull-right"> <div class="cajaTextoEstudiar"> <p class="textoEstudiar">MASTER UNIVERSITARIOS</p> </div> </div> </div> </div> </a> <a href="#"> <div class="contenidoCajaPrincipal"> <div class="aaaa"> <div class="imagenMenuPrincipal pull-left"> <img alt="#" title="#" class="img-responsive" src="http://hdwallpaperspretty.com/wp-content/gallery/hd-background-1920x1080/1920x1080%20Wallpaper%20128.jpg"> </div> <div class="textoMenuPrincipal pull-right"> <div class="cajaTextoEstudiar"> <p class="textoEstudiar">MASTER UNIVERSITARIOS</p> </div> </div> </div> </div> </a> <a href="#"> <div class="contenidoCajaPrincipal"> <div class="aaaa"> <div class="imagenMenuPrincipal pull-left"> <img alt="#" title="#" class="img-responsive" src="http://hdwallpaperspretty.com/wp-content/gallery/hd-background-1920x1080/1920x1080%20Wallpaper%20128.jpg"> </div> <div class="textoMenuPrincipal pull-right"> <div class="cajaTextoEstudiar"> <p class="textoEstudiar">MASTER UNIVERSITARIOS</p> </div> </div> </div> </div> </a> </div> <div class="col-sm-4 col-md-4 paddingBorder"> <ul class="opcionesMenuPrincipal"> <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Relaciones LAborales y recursos Humanos</a></li> <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li> <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li> <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li> <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en matemáticas/Grado en ingeniería informática</a></li> <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li> <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li> <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li> <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li> <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li> <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li> </ul> </div> <div class="col-sm-4 col-md-4 paddingBorder"> <ul class="opcionesMenuPrincipal"> <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Relaciones LAborales y recursos Humanos</a></li> <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li> <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li> <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li> <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en matemáticas/Grado en ingeniería informática</a></li> <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li> <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li> <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li> <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li> <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li> <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li> </ul> </div> </li> </div> </ul></li> <li class="dropdownEstatic dropdown menu-large"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> INVESTIGAR <span class="glyphicon glyphicon-menu-down pull-right"></span> </a> <ul id="menuEstaticoFlecha" class="dropdown-menu megamenu"> <div class="container"> <li> <div class="col-sm-4 col-md-4"> <a href="#"> <div class="contenidoCajaPrincipal"> <div class="aaaa"> <div class="imagenMenuPrincipal pull-left"> <img alt="#" title="#" class="img-responsive" src="http://hdwallpaperspretty.com/wp-content/gallery/hd-background-1920x1080/1920x1080%20Wallpaper%20128.jpg"> </div> <div class="textoMenuPrincipal pull-right"> <div class="cajaTextoEstudiar"> <p class="textoEstudiar">MASTER UNIVERSITARIOS</p> </div> </div> </div> </div> </a> <a href="#"> <div class="contenidoCajaPrincipal"> <div class="aaaa"> <div class="imagenMenuPrincipal pull-left"> <img alt="#" title="#" class="img-responsive" src="http://hdwallpaperspretty.com/wp-content/gallery/hd-background-1920x1080/1920x1080%20Wallpaper%20128.jpg"> </div> <div class="textoMenuPrincipal pull-right"> <div class="cajaTextoEstudiar"> <p class="textoEstudiar">MASTER UNIVERSITARIOS</p> </div> </div> </div> </div> </a> <a href="#"> <div class="contenidoCajaPrincipal"> <div class="aaaa"> <div class="imagenMenuPrincipal pull-left"> <img alt="#" title="#" class="img-responsive" src="http://hdwallpaperspretty.com/wp-content/gallery/hd-background-1920x1080/1920x1080%20Wallpaper%20128.jpg"> </div> <div class="textoMenuPrincipal pull-right"> <div class="cajaTextoEstudiar"> <p class="textoEstudiar">MASTER UNIVERSITARIOS</p> </div> </div> </div> </div> </a> </div> <div class="col-sm-4 col-md-4 paddingBorder"> <ul class="opcionesMenuPrincipal"> <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Relaciones LAborales y recursos Humanos</a></li> <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li> <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li> <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li> <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en matemáticas/Grado en ingeniería informática</a></li> <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li> <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li> <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li> <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li> <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li> <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li> </ul> </div> <div class="col-sm-4 col-md-4 paddingBorder"> <ul class="opcionesMenuPrincipal"> <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Relaciones LAborales y recursos Humanos</a></li> <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li> <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li> <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li> <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en matemáticas/Grado en ingeniería informática</a></li> <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li> <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li> <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li> <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li> <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li> <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li> </ul> </div> </li> </div> </ul></li> <li class="dropdownEstatic dropdown menu-large ultimo"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> EXPLORAR <span class="glyphicon glyphicon-menu-down pull-right"></span> </a> <ul id="menuEstaticoFlecha" class="dropdown-menu megamenu"> <div class="container"> <li class="col-sm-4 col-md-4"> <a href="#"> <div class="contenidoCajaPrincipal"> <div class="aaaa"> <div class="imagenMenuPrincipal pull-left"> <img alt="#" title="#" class="img-responsive" src="http://hdwallpaperspretty.com/wp-content/gallery/hd-background-1920x1080/1920x1080%20Wallpaper%20128.jpg"> </div> <div class="textoMenuPrincipal pull-right"> <div class="cajaTextoEstudiar"> <p class="textoEstudiar">MASTER UNIVERSITARIOS</p> </div> </div> </div> </div> </a> <a href="#"> <div class="contenidoCajaPrincipal"> <div class="aaaa"> <div class="imagenMenuPrincipal pull-left"> <img alt="#" title="#" class="img-responsive" src="http://hdwallpaperspretty.com/wp-content/gallery/hd-background-1920x1080/1920x1080%20Wallpaper%20128.jpg"> </div> <div class="textoMenuPrincipal pull-right"> <div class="cajaTextoEstudiar"> <p class="textoEstudiar">MASTER UNIVERSITARIOS</p> </div> </div> </div> </div> </a> <a href="#"> <div class="contenidoCajaPrincipal"> <div class="aaaa"> <div class="imagenMenuPrincipal pull-left"> <img alt="#" title="#" class="img-responsive" src="http://hdwallpaperspretty.com/wp-content/gallery/hd-background-1920x1080/1920x1080%20Wallpaper%20128.jpg"> </div> <div class="textoMenuPrincipal pull-right"> <div class="cajaTextoEstudiar"> <p class="textoEstudiar">MASTER UNIVERSITARIOS</p> </div> </div> </div> </div> </a> </li> <li class="col-sm-4 col-md-4 paddingBorder"> <ul class="opcionesMenuPrincipal"> <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Relaciones LAborales y recursos Humanos</a></li> <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li> <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li> <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li> <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en matemáticas/Grado en ingeniería informática</a></li> <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li> <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li> <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li> <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li> <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li> <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li> </ul> </li> <li class="col-sm-4 col-md-4 paddingBorder"> <ul class="opcionesMenuPrincipal"> <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Relaciones LAborales y recursos Humanos</a></li> <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li> <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li> <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li> <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en matemáticas/Grado en ingeniería informática</a></li> <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li> <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li> <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li> <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li> <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li> <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li> </ul> </li> </div> </ul></li> </ul> </div> </div> </div>
CSS
#menuEstatic .navbar-default { color: #fff; background-color: #ccc6c6; border-color: #aca1a2; } #menuEstatic .navbar-default .navbar-nav>li>a { color: #fff; } #menuEstatic .navbar-default .navbar-brand { color: #fff; } .menu-large { position: static !important; } .megamenu { padding: 20px 0px; width: 100%; } #dropdownEstatic{ float: left; width: 33.3%; } #submenu { margin-bottom: 0px!important; width: 100%; } .dropdownEstatic { float: left; width: 33.3%; } .imagenMenuPrincipal{ width: 50%; } .textoMenuPrincipal{ background: #d30037; min-height: 98px; width: 50%; } .cajaTextoEstudiar .textoEstudiar{ width: 50%; padding: 9px; color: white; } .contenidoCajaPrincipal{ width: 100%; min-height: 114px; } .contenidoCajaPrincipalSegundo{ width: 100%; padding-top:10px; min-height: 114px; } .opcionesMenuPrincipal{ list-style:none; } .opcionesMenuPrincipal li .glyphicon-menu-right{ font-size: 12px; color: #d30037; padding-right: 8px; } .opcionesMenuPrincipal li a,.opcionesMenuPrincipal li a:hover{ color: black; font-weight: bold; } .menuMovil .nav>li{ float: none; }
JS
$(window).load(function(){ jQuery(document).ready(function(){ $(".dropdownEstatic").hover( function() { $('.dropdown-menu',this).stop().fadeIn("slow"); },function() { $('.dropdown-menu',this).stop().fadeOut("fast"); }); }); });