Twitter Bootstrap&谷歌地图 [英] Twitter Bootstrap & Google Maps

问题描述

我的应用程式中有一个navbar和100％x 100％的google地图。我想在右边添加一个侧边栏有不同的过滤器。将它添加到右侧的原因是因为在适当的内容被推到下面时在较小的屏幕上有更好的体验。

I have a navbar and 100% x 100% google map in my app. I would like to add a sidebar on the right with different filters. Reason for adding it on the right side is because of better experience on smaller screens as the right content is pushed below.

地图呈现全屏的流体（％）值当我只是添加地图后最后一个导航栏div，如下：

The map renders full screen with fluid (%) values when I just add the map after the last nav bar div, like this:

地图是可见的：

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

如果我尝试在一个span内添加它来控制它的大小和添加

Map is not visible if I try to add it inside a span to control the size of it and add a side bar.

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

我不想在地图中添加固定值，因为它违反流体的目的。

I don't want to add a fixed value to the map, since it defeats the purpose of fluid.

感谢您提供任何有关如何让地图在容器流体中显示的提示。

Thanks in advance for any tips on how I can make the map visible inside a container-fluid.

推荐答案

发布的答案，我发现作为注释，但为了使它更加明显，这里是答案：https://github.com/twbs/bootstrap/issues/2475

Posted the answer I found as comment before, but to make it more visible, here is the answer: https://github.com/twbs/bootstrap/issues/2475

您必须添加javascript例如，当调整窗口大小时，将手动设置地图画布的高度
的回调。

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();

这篇关于Twitter Bootstrap&谷歌地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！