带有Bootstrap的Google地图无响应 [英] Google Maps with Bootstrap not responsive

问题描述

我使用的是引导程序和嵌入的Google Maps API 3.

#map_canvas ;这是一个固定的宽度。

此外，如果我使用 height：auto 和

为什么？

 < style type =text / css> 
 body {
 padding-top：60px; 
 padding-bottom：40px; 
} 
 #map_canvas {
 height：400px; 
 width：auto; 
} 
< / style> 
 
< div class =container> 
< div class =row> 
< div class =span6> 
< div id =map_canvas>< / div> 
< / div> 
< / div> 
< / div> 
  

解决方案

修订：

以下方法不需要引导程序或任何其他框架。它可以独立地使任何内容响应。通过计算 宽高比 。

pre> < div class =iframe-container>
<！ - 嵌入代码here - >
< / div>


CSS ：

  .iframe-container {
 position：relative; 
 width：100％; 
 padding-bottom：56.25％; / *比率16:9（100％/ 16 * 9 = 56.25％）* / 
} 
 .iframe-container> * {
 display：block; 
 position：absolute; 
 top：0; 
 right：0; 
 bottom：0; 
 left：0; 
 margin：0; 
 padding：0; 
 height：100％; 
 width：100％; 
} 
  

---

• 响应式Google地图


• Responsive OpenStreetMap


• Responsive Vimeo Video


• >

演示： http://jsfiddle.net/LHQQZ/135/

I'm using bootstrap and I embedded Google Maps API 3.

#map_canvas isn't responsive; it's a fixed width.

Also, if I use height: auto and width: auto the map doesn't show up in the page.

Why?

<style type="text/css">
  body {
    padding-top: 60px;
    padding-bottom: 40px;
  }
#map_canvas {
   height: 400px;
    width: auto;
  }
</style>

<div class="container">
 <div class="row">
  <div class="span6">
   <div id="map_canvas"></div>
  </div>
 </div>
</div>

解决方案

REVISED: The Official Post is outdated, so I've updated my answer and improved the code.

The following method does not require bootstrap or any other framework. It can be used independently to make any content responsive. To the parent element is applied a padding by calculating the aspect ratio. Then the child element is placed on top using absolute position.

The HTML:

<div class="iframe-container">
    <!-- embed code here -->
</div>

The CSS:

.iframe-container{
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* Ratio 16:9 ( 100%/16*9 = 56.25% ) */
}
.iframe-container > *{
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

---

The following 'fiddle' has examples on how to make:

• Responsive Google Map
• Responsive OpenStreetMap
• Responsive Vimeo Video
• Responsive Youtube Video

Demo: http://jsfiddle.net/LHQQZ/135/

这篇关于带有Bootstrap的Google地图无响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！