Jor*_*dyn 11 html javascript css jquery twitter-bootstrap
我想知道如何更改bootstrap mega菜单下拉大小以适应bootstrap容器宽度.
我在下面附上了一张图片,以便更好地理解我想做的事情.
HTML代码
<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 示例
\n\n超文本标记语言
\n\n<div class="visible-xs menuStaMovil">\n <nav id="menu" class="navbar navbar-default">\n <div class="container-fluid" id="fullNav">\n <div class="navbar-header">\n <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarBody" aria-expanded="false" id="collapsedNavbarExpand">\n <span class="sr-only">Toggle navigation</span>\n <span class="icon-bar"></span>\n <span class="icon-bar"></span>\n <span class="icon-bar"></span>\n </button>\n <a class="navbar-brand" href="index.html">Logo</a>\n </div>\n <div class="collapse navbar-collapse menuMovil" id="navbarBody">\n <ul class="nav navbar-nav">\n <li class="dropdown">\n <a href="#" class="dropdown-toggle navOption" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Tourism <span class="caret"> </span></a>\n <ul class="dropdown-menu">\n <li> <a href="../Pages/tourismHub.html"> <b> Tourism Hub </b> </a> </li>\n <li role="separator" class="divider"></li>\n <li> <a href="../Pages/eatingOut.html"> Eating Out </a> </li>\n <li> <a href="../Pages/attractions.html"> Attractions </a> </li>\n <li> <a href="../Pages/events.html"> Events </a> </li>\n <li> <a href="../Pages/history.html"> Town History </a> </li>\n </ul>\n </li>\n <li class="dropdown">\n <a href="#" class="dropdown-toggle navOption" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Residents<span class="caret"> </span></a>\n <ul class="dropdown-menu">\n <li> <a href="../Pages/residentsHub.html"> <b> Residents Hub </b> </a> </li>\n <li role="separator" class="divider"></li>\n <li> <a href="../Pages/events.html"> Events </a> </li>\n <li> <a href="../Pages/eatingOut.html"> Eating Out </a> </li>\n <li> <a href="../Pages/history.html"> History </a> </li>\n </ul>\n </li>\n <li class="dropdown">\n <a href="#" class="dropdown-toggle navOption" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Prospective Residents<span class="caret"> </span></a>\n <ul class="dropdown-menu">\n <li> <a href="../Pages/prospectiveResidentsHub.html"> <b> Prospective Residents Hub </b> </a> </li>\n <li role="separator" class="divider"></li>\n <li> <a href="../Pages/realEstate.html"> Real Estate </a> </li>\n <li> <a href="../Pages/attractions.html"> Attractions </a> </li>\n <li> <a href="../Pages/history.html"> Town History </a> </li>\n <li> <a href="../Pages/eatingOut.html"> Eating Out </a> </li>\n </ul>\n </li>\n <li class="dropdown">\n <a href="#" class="dropdown-toggle navOption" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Locations<span class="caret"> </span></a>\n <ul class="dropdown-menu">\n <li> <a href="../Pages/locationsHub.html"> <b> Locations Hub </b> </a> </li>\n <li role="separator" class="divider"></li>\n <li> <a href="../Pages/marina.html"> Marina </a> </li>\n <li> <a href="../Pages/highStreet.html"> High Street </a> </li>\n <li> <a href="../Pages/parishWharf.html"> Parish Wharf </a> </li>\n <li> <a href="../Pages/lakeGrounds.html"> Lake Grounds </a> </li>\n </ul>\n </li>\n <li> <a href="../Pages/map.html" class="navOption"> Map </a> </li>\n </ul>\n </div>\n </div>\n </nav>\n</div>\n\n\n<div id="menuEstatic" class="navbar navbar-default navbar-static-top hidden-xs">\n <div class="navbar-header">\n <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>\n </div>\n <div class="navbar-collapse collapse">\n <div class="container">\n <ul id="submenu" class="nav navbar-nav">\n <li class="dropdownEstatic dropdown menu-large">\n <a href="#" class="dropdown-toggle" data-toggle="dropdown"> INVESTIGAR <span class="glyphicon glyphicon-menu-down pull-right"></span></a>\n <ul id="menuEstaticoFlecha" class="dropdown-menu megamenu">\n <div class="container">\n <li>\n <div class="col-sm-4 col-md-4">\n <a href="#">\n <div class="contenidoCajaPrincipal">\n <div class="aaaa">\n <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>\n <div class="textoMenuPrincipal pull-right">\n <div class="cajaTextoEstudiar"><p class="textoEstudiar">MASTER UNIVERSITARIOS</p></div>\n </div>\n </div>\n </div>\n </a>\n\n <a href="#">\n <div class="contenidoCajaPrincipal">\n <div class="aaaa">\n <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>\n <div class="textoMenuPrincipal pull-right">\n <div class="cajaTextoEstudiar"><p class="textoEstudiar">MASTER UNIVERSITARIOS</p></div>\n </div>\n </div>\n </div>\n </a>\n\n <a href="#">\n <div class="contenidoCajaPrincipal">\n <div class="aaaa">\n <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>\n <div class="textoMenuPrincipal pull-right">\n <div class="cajaTextoEstudiar"><p class="textoEstudiar">MASTER UNIVERSITARIOS</p></div>\n </div>\n </div>\n </div>\n </a>\n </div>\n\n <div class="col-sm-4 col-md-4 paddingBorder">\n <ul class="opcionesMenuPrincipal">\n <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Relaciones LAborales y recursos Humanos</a></li>\n <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>\n <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>\n <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>\n <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en matem\xc3\xa1ticas/Grado en ingenier\xc3\xada inform\xc3\xa1tica</a></li>\n <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>\n <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>\n <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>\n <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>\n <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>\n <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>\n </ul>\n </div>\n <div class="col-sm-4 col-md-4 paddingBorder">\n <ul class="opcionesMenuPrincipal">\n <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Relaciones LAborales y recursos Humanos</a></li>\n <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>\n <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>\n <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>\n <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en matem\xc3\xa1ticas/Grado en ingenier\xc3\xada inform\xc3\xa1tica</a></li>\n <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>\n <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>\n <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>\n <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>\n <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>\n <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>\n </ul>\n </div>\n </li>\n </div>\n </ul>\n </li>\n <li class="dropdownEstatic dropdown menu-large">\n <a href="#" class="dropdown-toggle" data-toggle="dropdown"> INVESTIGAR <span class="glyphicon glyphicon-menu-down pull-right"></span></a>\n <ul id="menuEstaticoFlecha" class="dropdown-menu megamenu">\n <div class="container">\n <li>\n <div class="col-sm-4 col-md-4">\n <a href="#">\n <div class="contenidoCajaPrincipal">\n <div class="aaaa">\n <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>\n <div class="textoMenuPrincipal pull-right">\n <div class="cajaTextoEstudiar"><p class="textoEstudiar">MASTER UNIVERSITARIOS</p></div>\n </div>\n </div>\n </div>\n </a>\n\n <a href="#">\n <div class="contenidoCajaPrincipal">\n <div class="aaaa">\n <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>\n <div class="textoMenuPrincipal pull-right">\n <div class="cajaTextoEstudiar"><p class="textoEstudiar">MASTER UNIVERSITARIOS</p></div>\n </div>\n </div>\n </div>\n </a>\n\n <a href="#">\n <div class="contenidoCajaPrincipal">\n <div class="aaaa">\n <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>\n <div class="textoMenuPrincipal pull-right">\n <div class="cajaTextoEstudiar"><p class="textoEstudiar">MASTER UNIVERSITARIOS</p></div>\n </div>\n </div>\n </div>\n </a>\n </div>\n <div class="col-sm-4 col-md-4 paddingBorder">\n <ul class="opcionesMenuPrincipal">\n <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Relaciones LAborales y recursos Humanos</a></li>\n <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>\n <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>\n <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>\n <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en matem\xc3\xa1ticas/Grado en ingenier\xc3\xada inform\xc3\xa1tica</a></li>\n <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>\n <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>\n <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>\n <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>\n <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>\n <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>\n </ul>\n </div>\n <div class="col-sm-4 col-md-4 paddingBorder">\n <ul class="opcionesMenuPrincipal">\n <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Relaciones LAborales y recursos Humanos</a></li>\n <li>
| 归档时间： |
|
| 查看次数： |
1156 次 |
| 最近记录： |