谷歌地图不适用于 Chrome 中的引导卡布局答案

【问题标题】：Google Map is not working with bootstrap card layout in Chrome谷歌地图不适用于 Chrome 中的引导卡布局
【发布时间】：2021-05-02 12:58:20
【问题描述】：

我正在使用带有谷歌地图的引导卡布局。但是，每当我将谷歌地图移动到右栏中的卡片时，它就无法正确显示。但是，如果我将它移到第一列，它就可以工作！这个问题只发生在 chrome 和 edge 中。在 Firefox 中完美运行。有什么想法可以解决这个问题吗？

全屏查看以下代码

<!DOCTYPE html>
    <html>
    <head>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    </head>
    <body>
      <div class="card-columns">
        <div class="card">
          <div class="card-body">
            <p class="card-text">This is a longer card</p>
          </div>
        </div>
        <div class="card"> <!-- If I move this card to top, so it  will be on left side. Then it works!!!-->
          <div class="card-body">
            <div id="googleMap" style="width:100%;height:400px;"></div>
          </div>
        </div>
      </div>
      <script>
        function myMap() {
          var mapProp = {
            center: new google.maps.LatLng(51.508742, -0.120850),
            zoom: 5,
          };
          var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
        }
      </script>
      <script
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDvPRM33ZqqUlIdR-g3kT8gLj_cWWD4HHk&callback=myMap"></script>
    </body>
    </html>

查看第二张卡片中的评论

这就是它在 chrome 和 edge 中的样子！

编辑

我发现这是一个与 css 列数有关的问题。有了这个谷歌地图不能正确呈现。

【问题讨论】：

标签： javascript css bootstrap-4

【解决方案1】：

尝试使用card-deck 或card-group 然后它工作。 https://getbootstrap.com/docs/4.0/components/card/

或者查看卡片列的列数解决方法 Bootstrap 4 - Responsive cards in card-columns

<!DOCTYPE html>
    <html>
    
    <head>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    
      <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDvPRM33ZqqUlIdR-g3kT8gLj_cWWD4HHk&callback=myMap" defer></script>
      <script defer>
        function myMap() {
          var mapProp = {
            center: new google.maps.LatLng(51.508742, -0.120850),
            zoom: 5,
          };
          var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
        }
      </script>
    </head>
    
    <body>
      <div class="container mt-5">
        <div class="card-deck">
          <div class="card">
            <div class="card-body">
              <p class="card-text">This is a longer card</p>
    
            </div>
          </div>
          <div class="card">
            <!-- If I move this card to top, so it  will be on left side. Then it works!!!-->
            <div class="card-body">
              <p class="card-text">This is a longer card</p>
              <div id="googleMap" style="width:100%;height:400px;"></div>
            </div>
          </div>
      </div>
    </body>
    
    </html>

【讨论】：

在我的原始应用程序中，它有更多不同高度的卡片。所以卡片组和组不起作用:(
我会再看一遍
谢谢，实际上这是css column-count 属性的问题。使用它的引导卡。
@SameeraK 看看这个，解决你的问题：stackoverflow.com/questions/34140793/…