我一直试图在导航栏下拉菜单上重写内置的 Bootstarp 样式，但无济于事。我有一些 javascript 试图强制它，但我似乎无法让它工作。 native bootstrap javascript 覆盖了我的，并且它恢复到 228px 高度。这是我的代码:
// CLOSE NAV BARS NO OVERLAPPING
$('.navbar button').click(function(){
var $target = $($(this).data('target'));
if(!$target.hasClass('in')){
$('.navbar .in').removeClass('in').height(0);
}
});
//DROPDOWN MODE SELECTOR LOGIN
// Force 100% height mobile navigation
$('#navbar-collapse-1, #navbar-collapse-2').css('height', $(window).height());
$(".dropdown-menu li a").click(function(){
var selText = $(this).text();
$(this).parents('.modeSelector').find('.dropdown-toggle').html(selText+' <span class="modeSelect menu_toggleable glyphicon glyphicon-menu-down pull-right"></span>');
});
$('#myMode-glyphicon-mobile, #myMode-glyphicon').on('show.bs.dropdown', function () {
$(".modeSelect").removeClass("glyphicon-menu-down").addClass("glyphicon-menu-up");
});
$('#myMode-glyphicon-mobile, #myMode-glyphicon').on('hidden.bs.dropdown', function () {
$(".modeSelect").removeClass("glyphicon-menu-up").addClass("glyphicon-menu-down");
});
// FLIP ALL THE GLYPHICONS NAVBAR
$('#navbar-collapse-1').on('shown.bs.collapse', function () {
$(".myMenu-glyphicon").removeClass("glyphicon-menu-down");
$(".myMenu-glyphicon").addClass("glyphicon-menu-up");
$(this).addClass("dropdown-open").removeClass("dropdown-closed");
if( $('#navbar-collapse-2').hasClass('dropdown-open') ){
$(".myLogin-glyphicon").removeClass("glyphicon-menu-up");
$(".myLogin-glyphicon").addClass("glyphicon-menu-down");
$("#navbar-collapse-2").removeClass("dropdown-open");
$("#navbar-collapse-2").addClass("dropdown-closed");
}
});
$('#navbar-collapse-1').on('hidden.bs.collapse', function () {
$(".myMenu-glyphicon").removeClass("glyphicon-menu-up");
$(".myMenu-glyphicon").addClass("glyphicon-menu-down");
$(this).removeClass("dropdown-open").addClass("dropdown-closed");
});
$('#navbar-collapse-2').on('shown.bs.collapse', function () {
$(".myLogin-glyphicon").removeClass("glyphicon-menu-down");
$(".myLogin-glyphicon").addClass("glyphicon-menu-up");
$(this).addClass("dropdown-open").removeClass("dropdown-closed");
if( $('#navbar-collapse-1').hasClass('dropdown-open') ){
$(".myMenu-glyphicon").removeClass("glyphicon-menu-up");
$(".myMenu-glyphicon").addClass("glyphicon-menu-down");
$("#navbar-collapse-1").removeClass("dropdown-open");
$("#navbar-collapse-1").addClass("dropdown-closed");
}
});
$('#navbar-collapse-2').on('hidden.bs.collapse', function () {
$(".myLogin-glyphicon").removeClass("glyphicon-menu-up");
$(".myLogin-glyphicon").addClass("glyphicon-menu-down");
$(this).removeClass("dropdown-open").addClass("dropdown-closed");
if( $('#navbar-collapse-1').hasClass('dropdown-open') ){
$(".myMenu-glyphicon").removeClass("glyphicon-menu-up");
$(".myMenu-glyphicon").addClass("glyphicon-menu-down");
}
});
HTML
<div class="header">
<!-- BEGIN SEARCH AND LOGIN -->
<div class="container">
<div class="col-sm-4 logo hidden-xs"><a href="/"><img class="img-responsive" title="TMC Logo" src="images/tmcLogo.png" alt=""></a></div>
<div class="col-sm-4 login-wrapper hidden-xs">
<ul class="list-inline header-list">
<li>Login to Navisphere</li>
<li id="myMode-glyphicon" class="pull-right list-unstyled dropdown modeSelector">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Shippers <span class="modeSelect glyphicon glyphicon-menu-down"></span></a>
<ul class="modes list-unstyled dropdown-menu" role="menu">
<li><a href="#">Navisphere</a></li>
<li><a href="#">CHRWTrucks</a></li>
<li><a href="#">CHREUTransport</a></li>
</ul>
</li>
</ul>
<div class="clearfix"></div>
<form class="login-form" role="login">
<div class="form-group">
<input type="text" class="user-input form-control" placeholder="Username">
<input type="text" class="pass-input form-control" placeholder="Password">
<button type="submit" title="Login" class="btn btn-default"><i class="glyphicon glyphicon-arrow-right"></i></button>
</div>
</form>
</div>
<div class="col-sm-4 search-wrapper hidden-xs">
<form class="search-form" role="search">
<div class="form-group">
<input type="text" class="search-input form-control" placeholder="Search">
<button type="submit" title="Search TMC" class="btn btn-default"><i class="glyphicon glyphicon-search"></i></button>
</div>
</form>
</div>
</div>
<div class="row mobileNav">
<nav class="navbar navbar-default">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand hidden-md hidden-xl hidden-sm hidden-lg" href="#"><img class="img-responsive" title="TMC Logo" src="images/tmcLogo.png" alt=""></a>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" id="autocollapse" data-target="#navbar-collapse-1">
<span class="menu-toggle-text">MENU <i class="myMenu-glyphicon glyphicon glyphicon-menu-down"></i></span>
</button>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-2">
<span class="menu-toggle-text">LOGIN <i class="myLogin-glyphicon glyphicon glyphicon-menu-down"></i></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse dropdown-closed" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<form class="search-form mobileSearch-form hidden-sm hidden-md hidden-xl hidden-lg" role="search">
<div class="form-group">
<input type="text" class="search-input form-control" placeholder="Search">
<button type="submit" title="Search TMC" class="btn btn-default mobileSearch-btn"><i class="glyphicon glyphicon-search"></i></button>
</div>
</form>
<li class="active dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">SERVICES <span class="sr-only">(current)</span></a>
<div class="dropdown-menu hover-dropdown hidden-xs mainDropdown">
<div class="dividerNav"></div>
<ul class="list-inline hidden-xs">
<li><a href="#">TMS Technology</a></li>
<li><a href="#">Process Management</a></li>
<li><a href="#">Consulting</a></li>
<li><a href="#">Small Business Technology</a></li>
<li><a href="#">Global Control Tower</a></li>
</ul>
</div>
</li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">RESULTS</a>
<div class="dropdown-menu hover-dropdown hidden-xs mainDropdown">
<div class="dividerNav"></div>
<ul class="list-inline hidden-xs">
<li><a href="#">Manufacturing</a></li>
<li><a href="#">Automotive</a></li>
<li><a href="#">Food</a></li>
<li><a href="#">Produce</a></li>
<li><a href="#">Retail</a></li>
<li><a href="#">Paper/Packaging</a></li>
<li><a href="#">Beverage</a></li>
</ul>
</div>
</li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">RESOURCES</a>
<div class="dropdown-menu hover-dropdown hidden-xs mainDropdown">
<div class="dividerNav"></div>
<ul class="list-inline hidden-xs">
<li><a href="#">Videos</a></li>
<li><a href="#">White Papers</a></li>
<li><a href="#">Case Studies</a></li>
<li><a href="#">Blog</a></li>
</ul>
</div>
</li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">ABOUT</a>
<div class="dropdown-menu hover-dropdown hidden-xs mainDropdown">
<div class="dividerNav"></div>
<ul class="list-inline hidden-xs">
<li><a href="#">Our Story</a></li>
<li><a href="#">Values</a></li>
<li><a href="#">Leadership</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Charitble Giving</a></li>
</ul>
</div>
</li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">CONTACT</a>
<div class="dropdown-menu hover-dropdown hidden-xs mainDropdown">
<div class="dividerNav"></div>
<ul class="list-inline hidden-xs">
<li><a href="#">Locations</a></li>
<li><a href="#">Connect with an Expert</a></li>
<li><a href="#">Email News</a></li>
<li><a href="#">Update Preferences</a></li>
</ul>
</div>
</li>
</ul>
</div><!-- /.navbar-collapse -->
<div class="collapse navbar-collapse dropdown-closed" id="navbar-collapse-2">
<ul class="nav navbar-nav hidden-md hidden-xl hidden-sm hidden-lg mobileLogin">
<li>
<ul class="header-list list-unstyled">
<li class="list-unstyled mobile">Login to Navisphere</li>
<li id="myMode-glyphicon-mobile" class="list-unstyled dropdown modeSelector">
<a href="#" class="mobileDropdown dropdown-toggle mobile" data-toggle="dropdown" role="button" aria-expanded="false">Shippers <span class="modeSelect glyphicon glyphicon-menu-down pull-right"></span></a>
<ul class="mobileList list-unstyled dropdown-menu mobile" role="menu">
<li><a href="#">Navisphere</a></li>
<li><a href="#">CHRWTrucks</a></li>
<li><a href="#">CHREUTransport</a></li>
</ul>
</li>
</ul>
</li>
<div class="clearfix"></div>
<form class="login-form" role="login">
<div class="form-group">
<input type="text" class="user-input form-control longin-control" placeholder="Username">
<input type="text" class="pass-input form-control login-control" placeholder="Password">
<button type="submit" title="Login" class="btn btn-default mobileSearch-btn pull-right"><i class="glyphicon glyphicon-arrow-right"></i></button>
</div>
</form>
</ul>
</div>
</div><!-- /.container -->
</nav>
</div>
</div>
<!-- END HEADER -->
CSS
CSS
/************* BASIC STYLES **************/
a {
color:@tmcLightblue;
text-decoration:none;
}
a:hover {
text-decoration:none;
}
p {
margin: 10px 0;
}
body{
font-family:"Lato";
overflow-x:hidden;
}
html,body {
height: 100%;
min-height: 100%;
}
/********* NAV STYLES *********/
.dividerNav{
height:4px;
background-color:#fff;
}
.navbar.navbar-default > .container{
border-bottom:1px solid @tmcDarkblue
}
.menu-toggle-text{
color:#4fb4e1;
}
.navbar-toggle{
border:none;
padding:9px 1px;
}
.navbar-toggle:hover .navbar-toggle:focus{
background-color:none;
}
.hover-dropdown{
background-color:transparent;
}
.hover-dropdown ul{
border: medium none;
border-radius:0px;
background-color: rgba(0,58,99,0.80);
padding: 25px 0;
}
.navbar .hover-dropdown li a{
color:#fff;
margin: 0 18px;
}
.header-list{
margin-bottom:4px;
margin-top:15px;
}
.navbar-brand{
text-indent:-999px;
max-width:234px;
width:100%;
height:auto;
}
.nav > li {
display: block;
position: static;
margin: 0 25px 0 0;
}
.subscribe-input, .form-control:focus{
box-shadow:none;
border-color:@tmcDarkblue;
}
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar {
text-align: center;
margin-bottom:8px;
border-bottom:none;
border-top:0px;
border-radius:0px;
border-left:0px;
border-right:0px;
border-top:0px;
}
.mobileNav{
margin-left: 0px;
margin-right: 0px;
display:block;
height:100%;
}
.modeSelector{
right:57px;
}
.dropdown a{
text-decoration:none;
}
.navbar .hover-dropdown li a:hover {
text-decoration:none;
color:@tmcLightblue;
}
.dropdown-menu{
width:100%;
text-align:center;
box-shadow:none;
border:none;
border-radius:0;
}
.mainDropdown{
margin-top:-1px !important;
}
.modes{
border:1px solid @tmcDarkblue;
border-radius:0px;
text-align:left;
}
.modes li a{
color:@tmcDarkblue;
}
.modes li a:hover{
color:@tmcLightblue;
}
.user-input, .pass-input{
width:41.5%;
float:left;
}
.search-input{
width:82%;
}
.subscribe-input, .form-control{
border-radius:0px;
border-color:@tmcDarkblue;
color:@tmcDarkgrey;
float:left;
margin-right:4px;
}
.glyphicon-arrow-right{
color:#c05d1a;
}
.glyphicon-search{
color:#c05d1a;
}
.logo, .search-wrapper {
padding-top:39px
}
#navbar-collapse-2, #navbar-collapse-1{
position: static;
width: 100%;
z-index: 2147483647;
}
.nav > li.dropdown{
/*border-bottom:2px solid #fff;*/
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus{
color:@tmcLightblue;
background-color:none;
background:none;
border-bottom:2px solid @tmcDarkblue;
font-weight:bold;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
background-color: transparent;
color:@tmcLightblue;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
background-color: transparent !important;
color: @tmcLightblue;
}
.navbar-nav > li > a{
border-bottom:2px solid #fff;
}
.btn-default:hover, .btn-default:focus, .btn-default.focus, .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default {
background-color: #fff;
border-color: @tmcOrange;
color: #fff;
}
.glyphicon .glyphicon-search:hover {
color: #fff;
}
/********* HEADLINES *********/
.headlineBorder{
display:inline;
text-transform:uppercase;
font-size:20px;
/*border-bottom:3px solid @tmcGreen;*/
}
.headlineBorderblue{
display:inline;
text-transform:uppercase;
/*border-bottom:3px solid @tmcDarkblue;*/
}
.headlineBorderwhite{
display:inline;
text-transform:uppercase;
/*border-bottom:3px solid #fff;*/
color:#fff;
}
.headlineBorderwhite_small {
font-size: 22px;
margin: 0 0 5px;
}
.headlineList{
margin-bottom:15px;
}
.btn-blue{
border-color:@tmcLightblue;
}
.btn-blue:hover, .btn-blue:active, .btn-blue:focus{
background-color:@tmcDarkblue;
border-color:#fff;
}
.glyphicon-menu-right:hover{
color:#fff !important;
}
.headlineGlyph:hover{
color:@tmcLightblue !important;
}
.btn-mobile-right {
border:none;
}
.btn-mobile-right:hover, .btn-mobile-right:focus, .btn-mobile-right.focus, .btn-mobile-right:active, .btn-mobile-right.active, .open > .dropdown-toggle.btn-default {
background-color: transparent;
}
.glyphicon-menu-right, .glyphicon-menu-left{
/*color:@tmcLightblue;*/
}
.glyphicon-menu-right:hover, .glyphicon-menu-left:hover{
color:#fff;
}
.fourXfour{
margin-bottom: 50px;
}
/********** SIDEBAR STYLES ***********/
.sidebarImg{
margin:15px;
}
.sidebarImg > a {
display: block;
}
.caption{
margin-top:30px;
padding-left:15px;
padding-right:15px;
}
.caption > h4{
font-weight:bold;
line-height:12px;
}
/*********** CONTACT PAGE STYLES ***********/
.pageIntroheadline > ul.contactList li a{
color:#fff;
}
.fourXfour > ul.contactList li a{
color:@tmcLightblue;
}
.contactList{
margin-top:15px;
}
#myMap{
background:url('../images/worldMap.jpg');
background-repeat: no-repeat;
background-size:contain;
width: 100%;
height: 0;
padding-top: 66.64%; /* (img-height / img-width * width) */
/* (853 / 1280 * 100) */
}
.mapDescriptionwrapper{
display:block;
margin:-5px 0 0;
z-index:1;
}
.mapTitle{
background:@tmcLightblue;
padding:5px 8px;
border:1px solid #fff;
display:inline-block;
width:auto;
text-align:center;
color:#fff;
z-index:10;
}
.mapTitle:hover{
display:block;
background:orange;
display:inline-block;
}
.mapDescription{
display:none;
}
#description-box{
background-color: @tmcLightblue;
border: 1px solid white;
}
/********* INSIDE PAGE HERO IMAGE ************/
.insidePagehero {
display: block;
height: auto;
max-width: 960px;
min-height: 232px;
min-width: 392px;
width: 100%;
}
.halfHero{
padding:0;
}
.insideHerocolorPicker-orange{
background:@tmcOrange;
}
.insideHerocolorPicker-darkBlue{
background:@tmcDarkblue;
}
.insideHerocolorPicker-lightBlue{
background:@tmcLightblue;
}
.insideHerocolorPicker-green{
background:@tmcGreen;
}
.pageIntroheadline{
display: block;
color:#fff;
margin-top:5%;
margin-bottom:0;
}
.pageHero {
padding:0 15px 0 0;
}
/********* HOMEPAGE MARKETING AREA *********/
.marketing-wrapper{
margin-top:50px;
margin-bottom:50px;
}
.mareting-section{
padding:0;
}
/************************* FLIPPING STYLES *******************/
.marketing-wrapper h2{
margin-bottom:20px;
}
.flipperWrap{
padding:0;
}
.card {
width:100%;
max-width: 750.666px;
height: 348px;
margin: 0px;
display: inline-block;
clear:both;
}
.flip {
width:100%;
max-width: 750.666px;
height: 396px;
margin: 0px;
display: inline-block;
clear:both;
margin-bottom:30px;
}
.front, .back {
padding: 0px;
}
.front {
background-color: transparent;
}
.back {
background-color: transparent;
}
.arrowFront{
height:230px !important;
}
.arrowBack{
height:230px !important;
background:#c05d1a url(../images/triangle.jpg) no-repeat bottom right;
}
.blogInside, .tmsInside, .globalInside{
height: 50%;
margin: 2.5% auto;
width: 78%;
}
.flipBack{
color:#fff;
padding: 0px;
}
.flipOrange{
background-color:@tmcOrange;
}
.flipDarkblue{
background-color:@tmcDarkblue;
}
.flipLightblue{
background-color:@tmcLightblue;
}
.flipGreen{
background-color:@tmcGreen;
}
.flipDarkgrey{
background-color:@tmcDarkgrey;
}
.flipLightgrey{
background-color:@tmcLightgrey;
}
.blogIcon{
background:url("../images/blogIcon.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
display: inline-block;
height: 38px;
width: 46px;
float:left;
margin:0 22px 0 0;
}
.tmsIcon{
background:url('../images/tmsIcon.png') no-repeat scroll 0 0 rgba(0, 0, 0, 0);
display: inline-block;
height: 38px;
width: 46px;
float:left;
margin:0 22px 0 0;
}
.globalIcon{
background:url('../images/globalIcon.png') no-repeat scroll 0 0 rgba(0, 0, 0, 0);
display: inline-block;
height: 38px;
width: 38px;
float:left;
margin:0 22px 0 0;
}
/**************** LEADERSHIP SLIDER STYLES *****************/
.leadershipSlider{
margin-top:30px;
margin-bottom:30px;
}
.leadershipCol {
float: left;
margin-right:15px;
}
.leadershipName, .slider{
color:#fff;
height:auto;
width:82%;
max-width:138px;
background-color:@tmcOrange;
padding:10px;
margin:-85px 0 0 38%;
border:1px solid #fff;
display:block;
float:left;
}
.leadershipName .glyphicon.glyphicon-menu-right.pull-right{
color:#fff;
margin:-8px 0;
}
.leadershipImg{
display:block;
float:left
}
/**************** Client Results Page *******************/
.introText{
padding:0;
}
.clientResultsGrid{
margin-top:30px;
margin-bottom:30px;
}
.panel-default{
padding:0;
border:none;
}
.panel-default > .panel-heading{
border:none;
color:@tmcDarkblue;
background:#fff;
}
.panel{
box-shadow:none;
}
.panel-body{
background:@tmcLightgrey;
padding: 15px 0;
}
.panelResults{
margin-bottom:15px;
}
.panel-heading{
padding: 0;
background:@tmcLightblue;
border-radius:0px;
margin-bottom:5px;
}
.panel-title{
color:#fff;
padding: 15px 0;
font-weight: bold;
text-transform: uppercase;
}
.accordionResults{
padding: 0;
}
.accordionIcon{
color: #fff;
display: inline-block;
font-size: 33px;
min-width: 50px;
padding: 7.5px 0;
text-align: center;
}
.resultsIcon{
padding: 0 0.5%;
width:auto;
border-right:2px solid #fff;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
.resultsTitle{}
.glyphBox{
background: none repeat scroll 0 0 #c0c920;
display: inline-block;
height: auto;
margin: 15px 0 25px;
min-height: 32px;
min-width: 42px;
padding: 4px;
text-align: center;
}
a.glyphBox:hover, a.glyphBox:focus{
color:@tmcGreen;
text-decoration:none;
outline:nonne;
outline-offset:0px;
}
.glyphBox .indicator{
color:#fff;
vertical-align:middle;
}
.preResultsaccordion {
padding:0;
}
.preResultsaccordion > .inside{
padding:0;
margin:15px 0;
}
#collapseOne, #collapseTwo, #collapseThree, #collapseFour{
padding:0;
}
@media (max-width:@screen-lg) {
}
@media (max-width:@screen-md) {
.navbar-nav > li > a {
border-bottom: 0px solid #fff;
}
.modeSelector{
right:0px;
}
.search-input{
width:78%;
}
.user-input, .pass-input{
width:37%;
}
}
@media (max-width:@screen-sm) {
/*FEEDSLIDER*/
.headlineWrapper, .headlineWrapper-green, .headlineWrapper-white{
width:80%;
}
.mobile{
color:#fff;
}
.headlineHero{
font-size:medium;
}
.secondaryNavigation-wrapper{
background:@tmcDarkblue;
padding: 15px 0 0;
}
.secondaryNavigation-mobile{
color:#fff;
list-style:none;
padding-bottom: 0px;
padding-left:0;
padding-right:0;
margin: 0 auto;
width:47%;
}
.secondaryNavigation-mobile a{
color:#fff;
}
.secondaryNavigation-mobile a:hover{
color:@tmcLightblue;
}
ul.secondaryNavigation-mobile li{
list-style:none;
width:47%;
display:inline-block;
margin-bottom:0px;
margin-right:3px;
padding-bottom:0;
padding-left:0;
padding-right:0;
vertical-align: top;
padding-bottom:15px;
}
.navbar-toggle{
font-size:medium;
}
.navbar-collapse{
background-color: rgba(0,58,99,0.80);
}
.navbar-nav{
margin:15px -15px;
}
.nav > li > a{
text-align:left;
padding-left:0px;
padding-right:0px;
color:#fff !important;
}
.nav > li > a:hover{
color:@tmcLightblue !important;
}
.nav > li{
margin:0px;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus{
border-bottom:0px solid transparent;
color:@tmcLightblue !important;
}
.navbar-brand{
max-width:125px;
margin:0 0 0 5px;
}
#navbar-collapse-2, #navbar-collapse-1{
position: absolute;
width: 100%;
z-index: 2147483647;
}
.subscribe-input{
border-radius:0px;
border-color:@tmcDarkblue;
color:@tmcDarkgrey;
float:left;
margin-right:4px;
}
.search-form{
background-color:transparent !important;
color:#fff;
}
.mobileSearch-btn{
border-color: #fff;
background-color:transparent;
}
.mobileSearch-btn:hover{
border-color: #fff;
background-color:transparent;
}
.glyphicon-search {
color: #fff;
}
.glyphicon-arrow-right{
color: #fff;
}
.mobileLogin{
text-align:left;
}
.login-control{
float:none;
}
.user-input, .pass-input{
margin:0 0 5px 0;
width:100%;
float:none;
}
.dropdown-menu{
text-align:left;
}
.mobileDropdown{
background-color: transparent !important;
border: 1px solid #fff !important;
color: #fff;
margin: 5px 0 0;
padding: 6px 13px;
display: block;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
background-color: #fff;
padding: 5px 0;
}
.mobileList{
background-color: #fff !important;
border-radius: 0;
padding: 0;
}
.navbar-nav .open .mobileList{
position:absolute;
width:100%;
}
.mobileList li{
padding:4px 14px;
border-bottom:1px solid @tmcDarkblue;
}
.mobileNav{
margin-left: 0px;
margin-right: 0px;
}
最佳答案
您需要的是 .dropdown-menu 和 .sub-menu 类。
要改变菜单的高度试试这个:
.dropdown-menu
{
max-height: 400px;
}
关于javascript - 强制 Bootstrap 推特导航下拉菜单为窗口的 100% 高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31145389/