我想知道如何更改 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-default navbar-fixed-top 之后添加了一个容器类，但是这个容器没有将更改应用到下拉菜单。
请看下面的 JsFiddle。
任何帮助都会被挪用。
最佳答案
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");
});
});
});
关于javascript - Bootstrap3 Mega 菜单更改下拉宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37154980/
如何正确创建Rails迁移，以便将表更改为MySQL中的MyISAM？目前是InnoDB。运行原始执行语句会更改表，但它不会更新db/schema.rb，因此当在测试环境中重新创建表时，它会返回到InnoDB并且我的全文搜索失败。我如何着手更改/添加迁移，以便将现有表修改为MyISAM并更新schema.rb，以便我的数据库和相应的测试数据库得到相应更新？ 最佳答案 我没有找到执行此操作的好方法。您可以像有人建议的那样更改您的schema.rb，然后运行:rakedb:schema:load，但是，这将覆盖您的数据。我的做法是(假设
我有一个ModularSinatra应用程序，我正在尝试将Bootstrap添加到应用程序中。get'/bootstrap/application.css'doless:"bootstrap/bootstrap"end我在views/bootstrap中有所有less文件，包括bootstrap.less。我收到这个错误:Less::ParseErrorat/bootstrap/application.css'reset.less'wasn'tfound.Bootstrap.less的第一行是://CSSReset@import"reset.less";我尝试了所有不同的路径格式，但它
我在我的Rails项目中使用Pow和powifygem。现在我尝试升级我的ruby版本(从1.9.3到2.0.0，我使用RVM)当我切换ruby版本、安装所有gem依赖项时，我通过运行railss并访问localhost:3000确保该应用程序正常运行以前，我通过使用pow访问http://my_app.dev来浏览我的应用程序。升级后，由于错误Bundler::RubyVersionMismatch:YourRubyversionis1.9.3,butyourGemfilespecified2.0.0，此url不起作用我尝试过的:重新创建pow应用程序重启pow服务器更新战俘
我尝试使用不同的ssh_options在同一阶段运行capistranov.3任务。我的production.rb说:set:stage,:productionset:user,'deploy'set:ssh_options,{user:'deploy'}通过此配置，capistrano与用户deploy连接，这对于其余的任务是正确的。但是我需要将它连接到服务器中配置良好的an_other_user以完成一项特定任务。然后我的食谱说:...taskswithoriginaluser...task:my_task_with_an_other_userdoset:user,'an_othe
假设我有一个FireNinja我的数据库中的对象，使用单表继承存储。后来才知道他真的是WaterNinja.将他更改为不同的子类的最干净的方法是什么？更好的是，我很想创建一个新的WaterNinja对象并替换旧的FireNinja在数据库中，保留ID。编辑我知道如何创建新的WaterNinja来self现有FireNinja的对象，我也知道我可以删除旧的并保存新的。我想做的是改变现有项目的类别。我是通过创建一个新对象并执行一些ActiveRecord魔法来替换行，还是通过对对象本身做一些疯狂的事情，或者甚至通过删除它并使用相同的ID重新插入来做到这一点，这是问题的一部分。
我想解析一个已经存在的.mid文件，改变它的乐器，例如从“acousticgrandpiano”到“violin”，然后将它保存回去或作为另一个.mid文件。根据我在文档中看到的内容，该乐器通过program_change或patch_change指令进行了更改，但我找不到任何在已经存在的MIDI文件中执行此操作的库.他们似乎都只支持从头开始创建的MIDI文件。 最佳答案 MIDIpackage会为您完成此操作，但具体方法取决于midi文件的原始内容。一个MIDI文件由一个或多个音轨组成，每个音轨是十六个channel中任何一个上的
我最喜欢的Google文档功能之一是它会在我工作时不断自动保存我的文档版本。这意味着即使我在进行关键更改之前忘记在某个点进行保存，也很有可能会自动创建一个保存点。至少，我可以将文档恢复到错误更改之前的状态，并从该点继续工作。对于在MacOS(或UNIX)上运行的Ruby编码器，是否有具有等效功能的工具？例如，一个工具会每隔几分钟自动将Gitcheckin我的本地存储库以获取我正在处理的文件。也许我有点偏执，但这点小保险可以让我在日常工作中安心。 最佳答案 虚拟机有些人可能讨厌我对此的回应，但我在编码时经常使用VIM，它具有自动保存功
我想在IRB中浏览文件系统并让提示更改以反射(reflect)当前工作目录，但我不知道如何在每个命令后进行提示更新。最终，我想在日常工作中更多地使用IRB，让bash溜走。我在我的.irbrc中试过这个:require'fileutils'includeFileUtilsIRB.conf[:PROMPT][:CUSTOM]={:PROMPT_N=>"\e[1m:\e[m",:PROMPT_I=>"\e[1m#{pwd}>\e[m",:PROMPT_S=>"FOO",:PROMPT_C=>"\e[1m#{pwd}>\e[m",:RETURN=>""}IRB.conf[:PROMPT_MO
我正在使用Watir运行一个Ruby脚本来为我自动化一些事情。我试图自动将一些文件保存到某个目录。因此，在我的Mozilla设置中，我将默认下载目录设置为桌面并选择自动保存文件。但是，当我开始运行我的脚本时，这些更改并没有反射(reflect)出来。似乎首选项恢复为默认值。我已经包括以下内容require"rubygems"#Optional.require"watir-webdriver"#Forwebautomation.require"win32ole"#Forfilesavedialog.并打开一个新的firefox实例:browser=Watir::Browser.new(:
我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的