javascript - 在 Bootstrap Modal 上嵌入 Google map 时，高度和宽度设置为 0px

Question

我正在使用 Start Bootstrap 制作的主题。 ( http://startbootstrap.com/template-overviews/agency/ )

投资组合部分作为 Bootstrap modal 列表实现。

我试图在 modal 正文中插入 Google map ，但它没有显示在屏幕上。

我的 map html 代码是

<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content">
                     .
                     .
                     .
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2">
                    <div class="modal-body">
                                  .
                                  .
                                  .
                        <div class="map" id="map-ubnorth" style="height:300px;width:500px;position:absolute;">abc</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

但是，正如您在下面看到的，在我的浏览器中，高度和宽度设置为 0，并且不显示任何内容。

有趣的是，当我将 map 代码放在模态之外时，在主页面上，它会显示具有指定高度和宽度的 map 。

我做错了什么？起初我以为这是一个 CSS 问题，但事实并非如此。

Answer 1

您需要使用 embed-responsive 而不是 height 和 width 作为 map 大小。

<div class="embed-responsive embed-responsive-4by3">
 <div id="map-ubnorth" class="embed-responsive-item"></div>
</div>

示例如下:http://a0u.org/map_modal.html