如何使用 Bootstrap 使 google 地图 iFrame 响应？

Question

我是这样做的，代码在下面，我多次复制同一个iFrame，不同的宽高比，以特定的尺寸显示或隐藏。有什么 better/shorter 方法可以做到这一点吗？

<div class="container map d-none d-xl-block"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2919.353178018696!2d47.4802444157619!3d42.97083340430253!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x404ea15ce9e13f9f%3A0x42eb5720271dadf4!2sUlitsa%20Engel&#39;sa%2C%2030%2C%20Makhachkala%2C%20Respublika%20Dagestan%2C%20367015!5e0!3m2!1sen!2sru!4v1621256990741!5m2!1sen!2sru" width="1100" height="600" style="border:2px solid rgb(0, 183, 255);" allowfullscreen="" loading="lazy"></iframe></div>
<div class="container map d-none d-lg-block d-xl-none"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2919.353178018696!2d47.4802444157619!3d42.97083340430253!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x404ea15ce9e13f9f%3A0x42eb5720271dadf4!2sUlitsa%20Engel&#39;sa%2C%2030%2C%20Makhachkala%2C%20Respublika%20Dagestan%2C%20367015!5e0!3m2!1sen!2sru!4v1621256990741!5m2!1sen!2sru" width="900" height="600" style="border:2px solid rgb(0, 183, 255);" allowfullscreen="" loading="lazy"></iframe></div>
<div class="container map d-none d-md-block d-lg-none"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2919.353178018696!2d47.4802444157619!3d42.97083340430253!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x404ea15ce9e13f9f%3A0x42eb5720271dadf4!2sUlitsa%20Engel&#39;sa%2C%2030%2C%20Makhachkala%2C%20Respublika%20Dagestan%2C%20367015!5e0!3m2!1sen!2sru!4v1621256990741!5m2!1sen!2sru" width="700" height="400" style="border:2px solid rgb(0, 183, 255);" allowfullscreen="" loading="lazy"></iframe></div>
<div class="container map d-none d-sm-block d-md-none"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2919.353178018696!2d47.4802444157619!3d42.97083340430253!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x404ea15ce9e13f9f%3A0x42eb5720271dadf4!2sUlitsa%20Engel&#39;sa%2C%2030%2C%20Makhachkala%2C%20Respublika%20Dagestan%2C%20367015!5e0!3m2!1sen!2sru!4v1621256990741!5m2!1sen!2sru" width="530" height="400" style="border:2px solid rgb(0, 183, 255);" allowfullscreen="" loading="lazy"></iframe></div>
<div class="container map d-xs-block d-sm-none"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2919.353178018696!2d47.4802444157619!3d42.97083340430253!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x404ea15ce9e13f9f%3A0x42eb5720271dadf4!2sUlitsa%20Engel&#39;sa%2C%2030%2C%20Makhachkala%2C%20Respublika%20Dagestan%2C%20367015!5e0!3m2!1sen!2sru!4v1621256990741!5m2!1sen!2sru" width="300" height="300" style="border:2px solid rgb(0, 183, 255);" allowfullscreen="" loading="lazy"></iframe></div>

Answer 1

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

<div class="container map d-none d-xl-block">


<iframe class="responsive-iframe" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2919.353178018696!2d47.4802444157619!3d42.97083340430253!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x404ea15ce9e13f9f%3A0x42eb5720271dadf4!2sUlitsa%20Engel&#39;sa%2C%2030%2C%20Makhachkala%2C%20Respublika%20Dagestan%2C%20367015!5e0!3m2!1sen!2sru!4v1621256990741!5m2!1sen!2sru" width="1100" height="600" style="border:2px solid rgb(0, 183, 255);" allowfullscreen="" loading="lazy">
</iframe>

</div>

现在 Iframe 是响应式的

Answer 2

如果你仔细看你的iframe中有width="1100"。只需将其替换为width="100%"

如何使用 Bootstrap 使 google 地图 iFrame 响应？

How can I make google map iFrame responsive using Bootstrap?

html

javascript

css

iframe

twitter-bootstrap