Bootstrap: 谷歌地图在容器流体中不显示

创建于 2012-03-09 · 3评论 · 资料来源: twbs/bootstrap

你好，
我的应用中有一个导航栏和 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>

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

提前致谢！

资料来源

fohlsom

最有用的评论

不能这样做，因为地图的高度为 0。例如，您必须添加一个 javascript 回调，该回调将在调整窗口大小时手动设置地图画布的高度。

$(window).resize(function () {
    var h = $(window).height(),
        offsetTop = 60; // Calculate the top offset

    $('#map-canvas').css('height', (h - offsetTop));
}).resize();

BenjiZombie 于 2012-03-09

👍4

所有3条评论

不能这样做，因为地图的高度为 0。例如，您必须添加一个 javascript 回调，该回调将在调整窗口大小时手动设置地图画布的高度。

$(window).resize(function () {
    var h = $(window).height(),
        offsetTop = 60; // Calculate the top offset

    $('#map-canvas').css('height', (h - offsetTop));
}).resize();

BenjiZombie 于 2012-03-09

👍4

@BenjiZombie - 谢谢！这就解决了！

fohlsom 于 2012-03-10

谢谢！经过 10 条不同的建议，这一条可以快速轻松地工作！

rudi911 于 2012-11-04

此页面是否有帮助？

0 / 5 - 0 等级

Bootstrap: 谷歌地图在容器流体中不显示

最有用的评论

所有3条评论

相关问题