私はアプリケーションでリーフレットマップを使用していて、bootstrapを使用して応答性を高めています。そのマップの下にいくつかのボタンがあります。これは次のようになります。
しかし、私はこのようにマップ上のボタンを重ねたいです
これが私のHTMLです
<div class="span9" style="height:100%">
<div id="map"></div>
<div style="padding-left: 10px;padding-right: 10px">
<input type="button" id="Btn1" value="Btn1" onclick="" class="btnStyle span3" />
<input type="button" id="Btn2" value="Btn2" onclick="SaveRoutes()" class="btnStyle span3" />
<input type="button" id="Btn3" value="Btn3" onclick="editRoutes()" class="btnStyle span3" />
<span id="studentsCount" class="lblStyle span3"> Ikke rutesat: </span>
</div>
</div>
地図の私のCSS
html, body, #map, .row-fluid{
height: 100%;
}
#map {
width: 100%;
}
.btnStyle {
background-color: #4D90FE;
background-image: -moz-linear-gradient(center top , #4D90FE, #4787ED);
border: 1px solid #3079ED;
color: #FFFFFF;
padding: 4px;
margin-top: 4px;
margin-bottom: 4px;
width:100%
}
.lblStyle {
color: red;
padding: 4px;
margin-top: 4px;
margin-bottom: 4px;
width: 100%;
font-weight: bold;
}
私はあなたを正しく理解し、それが役に立てば幸いです。これがフィドルです: http://jsfiddle.net/g3JrG/4/
HTML:
<div class="span9" style="height:100%">
<div id="map-wrapper">
<div id="map"></div>
<div id="button-wrapper">
<input type="button" id="Btn1" value="Btn1" class="btnStyle span3" />
<input type="button" id="Btn2" value="Btn2" class="btnStyle span3" />
<input type="button" id="Btn3" value="Btn3" class="btnStyle span3" />
</div>
</div>
<span id="studentsCount" class="lblStyle span3"> Ikke rutesat: </span>
</div>
CSS:
#map-wrapper {
width: 100%;
height: 500px;
position: relative;
border: 1px solid black;
}
#map {
width: 100%;
height: 100%;
background-color: green;
}
#button-wrapper {
position: absolute;
bottom: 10px;
width: 100%;
border: 1px solid red;
}
TJL
Leaflet.jsは以下のクラスを提供します:
leaflet-bottom
leaflet-top
leaflet-left
leaflet-right
一般的なHTMLの例:
<div id="divmap"> <!--leaflet map wrapper div -->
<div id="map" > <!--leaflet map div -->
<div class="leaflet-bottom leaflet-left">
<div id="marker-legend"> <!-- here the legend -->
</div>
</div>
</div>
</div>
以前のHTMLを特定の質問に適応させる:
<div class="span9" style="height:100%">
<div id="map">
<div class="leaflet-bottom leaflet-left">
<input type="button" id="Btn1" value="Btn1" onclick="" class="btnStyle span3" />
<input type="button" id="Btn2" value="Btn2" onclick="SaveRoutes()" class="btnStyle span3 leaflet-control" />
<input type="button" id="Btn3" value="Btn3" onclick="editRoutes()" class="btnStyle span3 leaflet-control" />
<span id="studentsCount" class="lblStyle span3 leaflet-control"> Ikke rutesat: </span>
</div>
</div>
</div>
私はあなたの質問を正しく理解したと思います。マップ内に3つのボタンを表示したいとします。マップには角が丸く、ボタンにも角が丸いはずです。お役に立てれば。
これを試して:
HTML:
<div class="span9" style="height:100%">
<div id="map">
<div style="padding-left: 10px;padding-right: 10px; position:absolute; bottom:-10px; width:100%;">
<input type="button" id="Btn1" value="Btn1" onclick="" class="btnStyle span3" />
<input type="button" id="Btn2" value="Btn2" onclick="SaveRoutes()" class="btnStyle span3" />
<input type="button" id="Btn3" value="Btn3" onclick="editRoutes()" class="btnStyle span3" />
</div>
</div>
<span id="studentsCount" class="lblStyle span3"> Ikke rutesat: </span>
</div>
CSS:
html, body, #map, .row-fluid{
height: 100%;
}
#map {
width: 100%;
border-radius: 15px;
border:solid 1px black;
}
.btnStyle {
cursor:pointer;
background-color: #4D90FE;
border-radius: 15px;
background-image: -moz-linear-gradient(center top , #4D90FE, #4787ED);
border: 1px solid #3079ED;
color: #FFFFFF;
padding: 4px;
margin-top: 4px;
margin-bottom: 4px;
width:28%
}
.lblStyle {
color: red;
padding: 4px;
margin-top: 4px;
margin-bottom: 4px;
width: 100%;
font-weight: bold;
}