2

Bootstrap を使用して、リーフレット マップを含むページを構成しようとしています。

これがどのように見えるかです：

ここに画像の説明を入力

私はブートストラップでそれを行うことができませんでした。

ほとんど機能しない醜いCSSを書きました：

HTML

  <div class="container-fluid fill">
  <div class="row-fluid fill">

    <div class="span9 fill-height">
        <div  id="map"></div>
      </div>
       <div class="span3">
      <div id="filters">

      </div>
    </div>
    </div>
</div>

CSS

#map
{
    width: 100px;
    height:100px;
    min-height: 100%;
    min-width: 100%;
    display: block;
}

html, body
{
    height: 100%;
}

.fill
{  padding-left: 0px;
    min-height: 100%;
    height: 100%;
    width: 100%;
    min-width: 100%;
}

.fill-height
{  padding-left: 0px;
    min-height: 100%;
    height: 100%;

}

body
{
    padding-top: 40px; /*for navbar*/
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
     box-sizing: border-box; /* Opera/IE 8+ */
}

オーバーフローを防ぐためにパディングを削除する必要があったため、フォームにパディングがなくなりました。

私の質問：

ブートストラップ クラスでその構造を取得するにはどうすればよいですか? パディングを維持するにはどうすればよいですか?

4

2 に答える 2

0 
  <div class="container-fluid fill">
  <div class="row-fluid">

    <div class="span9 fill-height" >
        <div  id="map"></div>
      </div>
       <div class="span3">
      <div id="filters">

      </div>
    </div>
    </div>
</div>

& css は次のようになります。

body {
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
}
html, body, #map, .row-fluid{
    height: 100%;
}
#map {
    width: 100%;
}

.fill-height
{  padding-left: 0px;
    min-height: 100%;
    height: 100%;

}
于 2013-06-06T08:21:15.087 に答える