我有一个带有引导导航栏和Google地图的网页。导航栏固定在顶部,并且放置了Google地图,以填充屏幕的其余部分
<div class="container-fluid">
<header class="row">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="brand" href="#">{{ HTML::image('images/logo.png', array('class'=>'logo')) }}</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Reports <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Report 1</a></li>
<li><a href="#">Report 2</a></li>
<li><a href="#">Report 3</a></li>
<li><a href="#">Report 4</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">User <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Settings</a></li>
<li><a href="#">Logout</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div id="main">
<div id="mapcanvas"></div>
</div>
</div>`
加载谷歌地图和导航栏没有问题。但是,当导航栏折叠并且我单击切换按钮时,菜单不会显示。
CSS:
html,body {width:100%;height:100%;margin:0;padding:0;}
#mapcanvas {
display: block;
position:absolute;
height:auto;
bottom:0;
top:0;
left:0;
right:0;
margin-top:50px;
}
Bootply:bootply.com/3ejKtiSHkw
最佳答案
我不知道到底是什么问题,但我发现这个剧院似乎是某事。与CSS。
将navbar-fixed-top
-类添加到导航栏可以使下拉列表起作用。我不知道这是否是您必需的行为。
因此,将其分解:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
使下拉菜单在折叠的导航栏中起作用。
关于javascript - Bootstrap折叠菜单未与Google Map一起显示,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/23780624/