问使用HERE地图和引导程序实现响应式设计

EN

我正在学习bootstrap，并尝试使用基于this example from HERE的HERE地图

我意识到，为了能够使用相对高度(例如，高度: 50%)，我必须使css样式如下：

html, body {
  height: 100%;
  width: 100%;
}

#map {
  width:100%;
  height: 100%;
  margin:0 auto;
}

现在我想用bootstrap创建两列，左边是行程，右边是地图视图。

<div class="container">
<div class="row">
  <div class="col-sm-4">
    Here comes the itinerary
  </div>
  <div class="col-sm-8" id="map">
  </div>
</div>

我很快意识到，我必须对地图元素使用绝对大小(例如，宽度: 400px)，否则地图根本不会显示(当使用高度:100%；时)，或者列从开始堆叠(使用宽度: 100%;)

我怀疑，原因在于父元素(行、容器)的宽度/高度样式，但我不知道正确的解决方案。

我还知道，在获得正确的样式后，我需要注意调整窗口大小时地图大小的自动调整，但我希望首先获得正确的样式。