在Bootstrap Modal

Question

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

投资组合部分实施为Bootstrap modal s。

的列表

我尝试在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问题，但似乎并非如此。

Answer 1

当模态变为可见时，您需要在地图实例上触发resize事件：

$('#portfolioModal1').on('shown.bs.modal', function (e) {
    // Assuming your map instance is stored in variable 'map'
    google.maps.event.trigger(map, 'resize');
});

Answer 2

您需要使用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