javascript - Bootstrap row over leaflet

Question

I'm trying to put over a leaflet map a bootstrap row, my html is:

<div class="row-fluid some" id="map">
    <div class="span1"></div>
    <div class="span2"></div>
</div>

span1 and span2 are columns with some information with rgba background. the leftover columns are a visible map area.

The problem is the map is showing over the columns and they are visible only when map is loading or zooming out.

span1 and span2 have z-index: 2000

How to I can put columns visible over the map?

Answer 1

您可以将它们放在一个通用容器中，并绝对定位您要覆盖地图的行。

演示（带传单）

<div class="container-fluid">
    <div class="mapbox">
        <div class="row-fluid some" id="map">
            <img src="//placehold.it/600x400">
        </div>
        <div class="row-fluid overlay">
            <div class="span1">
                <button class="btn btn-primary">Button</button>
            </div>
            <div class="span2">
                <button class="btn">Button</button>
            </div>
        </div>
    </div>
</div>

.mapbox {
    position: relative;
}

.mapbox .overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 314159;
    pointer-events: none;
}

.mapbox .overlay .btn {
    pointer-events: initial;
}

通过指定可以单击元素pointer-events: none。请注意，默认情况下，这会删除单击所述元素的子元素的能力（因为默认pointer-events值为inherit），因此请声明pointer-events: initial您希望能够与之交互的那些元素。

_{注意：按钮堆叠在小提琴上的原因是 Bootstrap 的媒体查询，将小预览视为手机大小。}