地图上元素的Bootstrap和地图设计

Question

我正在使用bootstrap和map API。地图Api使用％100高度。我想在地图上显示带有bootstrap的创建元素。 Jsfiddle就在这里。

我想这样表现出来。

Answer 1

您必须将 mapDiv 与另一个div包装在一起，制作'wrapper'和'panel' absolute 因此，您的面板可以在地图上方飞行，您可以使用顶部，左侧，底部或右侧设置面板的位置。

wrapperMap：

<div class="wrapperMap">
    <div id="mapDiv"></div>
</div>

<div id="fly" class="panel panel-warning">
     <div class="panel-heading">
         <h3 class="panel-title">Layers Not Found</h3>
     </div>
     <div class="panel-body">Sorry, I could not list layers!</div>
</div>

CSS：

#fly {
    position: absolute;
    clear: none;
    left: 20%;
}
.wrapperMap {
    height: 100%;
    width: 100%;
    position: absolute;
    clear: none;
}

查看此JS Fiddle