如何使mapbox地图在卡内响应？

Question

我在一张卡片里有一张mapbox地图，我终于可以“适应”它了，但它没有响应，在移动设备上看起来很糟糕。我希望它与页面/卡片容器一起缩小。如何让地图做出响应？

<div class="row">
    <div class="col-6 offset-3">
        <div class="card mb-3">
          <div class="card-body mb-4">
            <div id="map-container">
              <div id="map">
              </div>
            </div>
          </div>
      </div>
   </div>
</div>

这是我的app.css样式表

#map-container {
    position: relative;
    height: 180px;
    width: 600px;
}

#map {
    position: relative;
    height: inherit;
    width: inherit;
}

Answer 1

正在修改代码并使其正常工作。答案如下：

#map-container {
    height: 180px;
    width: 100%;
}

#map {
    position: relative;
    height: inherit;
    width: inherit;
}