MVC 5 / Bootstrap渲染不一致

Question

在我的Bootstrap MVC 5应用程序中，我有一个页面，左边有一个表格div，右边有一个Google Maps div。 HTML如下所示：

<div class="row">
    <div class="col-xs-12 col-lg-5">
        <table id="listingTable" class="table table-bordered table-responsive table-hover table-condensed sortable">
            <thead>
                <tr>
                </tr>
            </thead>

            <tbody class="searchable">
            </tbody>
        </table>
    </div>

    <div class="col-xs-12 col-lg-offset-1 col-lg-6">
        <div id="googleMap" style="height:350px;"></div>
    </div>
</div>

最初显示的确如此。对于XS，S和MD显示，我在表格div下面获得了Google地图div。对于大型，我并排获得它们。但是，如果我慢慢缩小浏览器的宽度，而在LG大小的情况下，Google div将开始覆盖表格的右侧，直到我达到MD大小，然后它会移动到桌子下面，就像它应该的那样。我的问题是这个。为什么谷歌地图会在LG显示屏中覆盖表格的右手部分，这可以“修复”吗？