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

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

Portfolio部分实现为Bootstrap modal的列表。

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

我的地图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，并且什么也不显示。



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

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

最佳答案

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

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

这是示例：http://a0u.org/map_modal.html