Twitter bootstrap 如何使用引导网格系统覆盖地图

我试图在一个全屏谷歌地图网页上覆盖几个面板。我想使用mdl网格系统来保持设计的简单和快速

这是我的html（有一些伪代码）：

这解决了我对快速响应的网站和简单性的需求。但是，我无法滚动地图或与地图交互（网格系统覆盖地图并屏蔽单击地图的能力）

地图面板占据了大约25%的屏幕，所以我有足够的空间与谷歌地图互动，我有几个元素像地图面板

我还尝试：

#map{ 
 position:absolute; 
 top:0; 
 left:0; 
 z-index:1; 
} 
.overlay{ 
   margin-top: 10%; 
   position: relative; 
   z-index: 0;
   height: 100%;
   width: 100%;
}

.map-panel{
    z-index: 3;
}

但我的面板消失在地图下面

---

如何在google maps上覆盖一个通用的网格系统，并保持与google map交互的能力？

如果没有代码进行测试，很难给您一个明确的答案，但您缺少的基本概念是HTML

您要定位一个外部父/包裹，它是地图和覆盖的

相对位置
绝对位置
位置

HTML
希望这能为您指明正确的方向，快乐编码！：）
 如果没有代码进行测试，就很难给您一个明确的答案，但您缺少的基本概念是HTML

您要定位一个外部父/包裹，它是地图和覆盖的
相对位置
绝对位置
位置

HTML
希望这能为您指明正确的方向，快乐编码！：）
 谢谢，但是，我的地图应该是全页的，这超出了你原来的问题的范围。。。但要实现这一点，您可以使用
vw
和
vh
测量值。它们是指屏幕视图端口的百分比。如果替换
宽度：500px宽度，代码>为100vw和<代码>高度：500px带<代码>高度：100vh
将为您提供一个全屏父元素，以在任何大小的屏幕上填充地图。如果我的解决方案有效，请选择我的答案作为解决方案。问题是，当你像这样覆盖地图时，你仍然可以看到它，但不能与它交互（不透明度保持地图可见，但不能单击它）问题的重点是在使用响应功能覆盖地图的同时保持地图功能。只需做一个小改动即可工作：附加
。地图面板{位置：绝对；顶部：0；左侧：0；右侧：0；底部：0；高度：60vh；z-索引：3；}
解决它，但是，我的地图应该是整页的，这超出了你原来问题的范围。。。但要实现这一点，您可以使用
vw
和
vh
测量值。它们是指屏幕视图端口的百分比。如果替换
宽度：500px宽度，代码>为100vw和<代码>高度：500px带<代码>高度：100vh
将为您提供一个全屏父元素，以在任何大小的屏幕上填充地图。如果我的解决方案有效，请选择我的答案作为解决方案。问题是，当你像这样覆盖地图时，你仍然可以看到它，但不能与它交互（不透明度保持地图可见，但不能单击它）问题的关键是在使用响应功能覆盖地图的同时保持地图的功能。只需做一个小的更改：附加
。地图面板{位置：绝对；顶部：0；左侧：0；右侧：0；底部：0；高度：60vh；z索引：3；}
解决它
#map{
  position:absolute;
  top:0;
  left:0;
  z-index:1;
}
.overlay{
  margin-top: 10%;
  position: relative;
  z-index: 2;
  height: 100%;
  width: 100%;
}

#map{ 
 position:absolute; 
 top:0; 
 left:0; 
 z-index:1; 
} 
.overlay{ 
   margin-top: 10%; 
   position: relative; 
   z-index: 0;
   height: 100%;
   width: 100%;
}

.map-panel{
    z-index: 3;
}

<div class="outer-wrap">
    <map></map>
    <div class="overlay">
        <div class="row">
            <div class="col-md-3 col-md-offset-9">
                <div class="map-panel"></div>
            </div>
        </div>
    </div>
</div>

.outer-wrap {
    /* Must have some sort of height and width so that
    inner children (map and overlay) can position 
    themselves to it */
    height: 500px;
    width: 500px;
    position: relative;
}
map, div.overlay {
    /* This stretches the these elements to the edges of 
    the closest element upwards in the DOM with a relative 
    positioning (in this case it's the .outer-wrap) */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

map {
    /* needs to be lower than the overlay */
    z-index: 1;
}
div.overlay {
    z-index: 2; /* Needs to be higher than the map */
    opacity: .8; /* Just to keep the map is visible */
}