19

アプリケーションでリーフレット マップを使用し、応答性のためにブートストラップを使用しています。その地図の下にいくつかのボタンがあります。こんな感じです。

ここに画像の説明を入力

しかし、私はこのように地図上のボタンを重ねたい

ここに画像の説明を入力

ここに私の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;
}
4

3 に答える 3

16

私があなたを正しく理解したことを願っています。これがフィドルです：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

于 2013-07-30T09:39:06.763 に答える
2

あなたの質問が正しく理解できたことを願っています。マップ内に 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;
}

フィドル

于 2013-07-30T09:19:06.030 に答える