css - Twitter Bootstrap 和谷歌地图

Question

我的应用程序中有导航栏和 100% x 100% 谷歌地图。我想在右侧添加一个带有不同过滤器的侧边栏。将其添加到右侧的原因是因为正确的内容被推送到下方，因此在较小的屏幕上有更好的体验。

当我在最后一个导航栏 div 之后添加 map 时， map 呈现全屏并具有流畅的 (%) 值，如下所示:

map 可见:

<div class="navbar">
    <nav bar stuff......>
</div>
<div id="map-canvas"></div>

如果我尝试将 map 添加到跨度内以控制其大小并添加侧边栏，则 map 不可见。

<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>

我不想向 map 添加固定值，因为它违背了流畅的目的。

提前感谢您提供有关如何使 map 在容器流体内可见的任何提示。

Answer 1

将我找到的答案发布为评论，但为了使其更明显，这里是答案: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();