css – Twitter Bootstrap和Google Maps

我的应用中有一个导航栏和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();