我的应用中有一个导航栏和100%x 100%的谷歌地图.我想在右边添加一个侧边栏,使用不同的过滤器.将其添加到右侧的原因是因为在较小的屏幕上更好的体验,因为正确的内容被推到下面.
当我在最后一个导航栏div之后添加地图时,地图会呈现流体(%)值的全屏,如下所示:
地图可见:
<div class="navbar"> <nav bar stuff......> </div> <div id="map-canvas"></div>
如果我尝试将它添加到一个范围内来控制它的大小并添加一个侧边栏,地图是不可见的.
<div class="container-fluid"> <div class="row-fluid"> <div class="span9"> <div id="map-canvas"></div> </div> <div class="span3"> <div class="well sidebar-nav"> <ul class="nav nav-list"> <li class="nav-header">Sidebar</li> <li class="active"><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </div> </div> </div> </div>
我不想为地图添加固定值,因为它违反了流体的目的.
提前感谢有关如何使地图在容器流体中可见的任何提示.
解决方法
发表回答我发现以前的评论,但为了使其更加明显,这里是答案:
https://github.com/twbs/bootstrap/issues/2475
You must add a javascript callback that will manually set the height
of the map-canvas when the window is resized,for example.
$(window).resize(function () { var h = $(window).height(),offsetTop = 60; // Calculate the top offset $('#map-canvas').css('height',(h - offsetTop)); }).resize();
原文地址:https://www.jb51.cc/css/217031.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。