html - 集成 Leaflet 和 Bootstrap：帮助重构我的 CSS

Question

我正在尝试使用 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+ */
}

我必须删除填充以防止溢出，所以现在我的表单没有填充。

我的问题：

如何使用引导类获得该结构？如何保留填充但仅用于表单？

Answer 1

仍然需要很多 css，但填充问题已解决：

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



html, body
{
    height: 100%;
}

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

.fill-height
{  padding: 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+ */
}

Answer 2

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

}