Как поместить кнопки на карте листовка

Я использую карту листовок в своем приложении и использую бутстрап для реагирования. У меня есть несколько кнопок ниже этой карты. Это выглядит примерно так.

Но я хочу накладывать кнопки на карте следующим образом

Вот мой 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;
}

Ответ 1

Надеюсь, я понял тебя правильно, и это помогает. Вот скрипка: 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

Ответ 2

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;
}

Fiddle