Question

我正在尝试使用引导程序来使Google Map API居中，但无法正常工作。请查看有关该问题的图像。文字居中，而不是地图。！[地图发行图片]：https://imgur.com/a/kql5OTK

我尝试了各种方法将“文本中心”放置在周围的元素中，并将地图放置在“ col-md-6”中，但没有任何效果。我确定我缺少一些愚蠢的东西。任何帮助将不胜感激。

<div class="container">
    <h1 class="text-center">My Map</h1>
    <div class="text-center" id="map"></div>
</div>

Answer 1

找到了！ div #map需要Bootstrap类：

class = "mx-auto"

Answer 2

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="container text-center">
  <div class="row">
    <div class="col-md-12">
      <h1>My Map</h1>
    </div>
  </div>
  <div class="row mt-5">
    <div class="col-md-12">
      <div id="map">
        <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d14475.259566651797!2d91.88062475!3d24.90429495!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sbd!4v1563361490340!5m2!1sen!2sbd" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
      </div>
    </div>
  </div>
</div>
</body>
</html>

在<h1>> <div>

中包装.row和.col标签

容器提供了一种使您的居中和水平放置的方法网站的内容。使用.container作为响应像素宽度或 .container-fluid的宽度：在所有视口和设备上均为100％大小。
行是列的包装。每列都有水平填充（称为装订线）以控制它们之间的空间。这个然后以负边距抵消行上的填充。这个这样，您列中的所有内容都在视觉上向下对齐左侧。
在网格布局中，内容必须放置在列中，并且只能列可能是行的直接子代。

作为参考，请通过https://getbootstrap.com/docs/4.0/layout/grid/此链接

引导Google Map不居中

2 个答案: