html - 集成 Leaflet 和 Bootstrap : help refactoring my css

Question

我正在尝试使用 Bootstrap 构建包含传单 map 的页面。

这是它的样子:

我一直无法使用 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+ */
}

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

我的问题:

如何使用 Bootstrap 类获取该结构？如何保留填充但仅用于表单？

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+ */
}