如何让按钮与响应式Div中的Google Map保持同宽？

当然可行！你当前遇到的问题是按钮用了固定的width:60vh——这个单位是基于视口高度计算的，在小屏幕下地图会随着col-lg-6的宽度收缩，但按钮还在按视口高度的60%计算宽度，所以才会出现过宽的情况。我们可以通过以下两种简单方法解决：

方法一：使用Bootstrap内置宽度类（推荐） #

直接给按钮添加Bootstrap的w-100类，去掉原来的width:60vh样式，这样按钮会自动占满父容器（也就是col-lg-6）的宽度，和地图保持一致：

<div class="col-lg-6">
  <p>
    <button formtarget="_blank" onclick="window.open('https://www.google.com/maps/search/?api=1&query=@Model.OfficialSchoolName+@Model.Address1+@Model.County+@Model.Eircode')" type="button" class="btn btn-primary w-100">
      <span class="glyphicon glyphicon-road" aria-hidden="true"></span> Get Directions
    </button>
  </p>
  <div class="embed-responsive embed-responsive-16by9">
    <div id="map" class="embed-responsive-item" style="border: 1px solid black;"></div>
  </div>
</div>

w-100是Bootstrap的工具类，作用是让元素宽度设为100%，自动继承父容器的宽度。这样不管屏幕怎么缩放，按钮都会和地图所在的col-lg-6宽度保持一致。

方法二：自定义CSS宽度 #

如果你不想用Bootstrap工具类，也可以直接把按钮的样式改成width:100%，效果完全相同：

<button style="width:100%" formtarget="_blank" onclick="window.open('https://www.google.com/maps/search/?api=1&query=@Model.OfficialSchoolName+@Model.Address1+@Model.County+@Model.Eircode')" type="button" class="btn btn-primary">
  <span class="glyphicon glyphicon-road" aria-hidden="true"></span> Get Directions
</button>

补充说明 #

p标签默认有上下外边距，但它的宽度是100%，不会影响按钮的宽度继承，所以不用额外调整p标签的样式。修改后，按钮就会始终和地图的宽度匹配，不管是全屏还是小屏幕显示都能完美适配。

内容的提问来源于stack exchange，提问作者craig2020