Javascript MVC 5/Bootstrap呈现不一致

在我的Bootstrap MVC 5应用程序中，我有一个页面，左侧有一个table 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显示，我将Google地图div放在table div下面。对于大型显示，我将它们并排显示。然而，如果我慢慢缩小浏览器的宽度，而使用LG尺寸，Google div将开始覆盖表格的右侧，直到我达到MD尺寸，然后它会移动到表格下方，这是应该的。我的问题是。为什么Google Maps div在LG显示器中覆盖了表格的右侧部分，这可以“修复”吗？

我遇到过类似的情况，但我认为这是应该的。既然你提到了这一点，我很好奇根本原因是什么，解决方案是什么！