CSS和Bootstrap對齊問題

Question

我的小冊子地圖覆蓋了地圖的標題，它應該剛好位於地圖上方。我使用CSS和Bootstrap來對齊頁面元素。查看該圖像：以下是代碼：是

<style type="text/css"> 
body, html { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 

div { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 
img { 
width:97%; /* you can use % */ 
height: auto; 
} 
div#location { 
    width:600px; 
    height:400px; 
} 

div#datatable {height:700px; overflow-y:scroll; width: 425px word-wrap: break-word;} 
td.dc-table-label {display:none;} 
span.dc-data-count {font-size:.5em;} 
span.dc-data-count {font-weight: normal;} 
table#media-table { 
    background-color: black; 
    color:white; 
    padding: 0; 
} 

<div class="container" style="padding-top:20px"> 

<h2 class="page-title">Ivan Doig Archive Explorer <span class="dc-data-count">Showing <span class="filter-count"></span> of <span class="total-count"></span> photographs {<a href="javascript:dc.filterAll(); dc.renderAll();">reset</a>}</span> 
</h2> 

    <div class="row"> 
     <div class="col-md-4"> 
      <strong><span id="datatable"></span>Media</strong> 
      <table class="table table-hover" id="media-table"></table> 
     </div> 
     <div class="col-md-6" id="location"> 
      <strong><span id="map"></span>Location</strong> 
     </div> 
    </div> 

引用的數據表，並在地圖上，如下所示：

var map = dc.leafletMarkerChart("#location", groupname) 
var dataTable = dc.dataTable("#media-table", groupname) 

地圖假定與「幻燈片」的頂部對齊，並且與「媒體」一樣擁有「位置」的標題。這將允許在每個元素的頂部添加彙總統計信息。

Answer 1

dc.leaflet.js將要接管整個<div>它的構造函數中給出，所以只要將標題出來的DIV的，對不對？

因爲這意味着地圖不佔用整個引導列，所以我們需要將它放在它自己的子div中。

<div class="row"> 
    <div class="col-md-4"> 
     <strong><span id="datatable"></span>Media</strong> 
     <table class="table table-hover" id="media-table"></table> 
    </div> 
    <div class="col-md-6" id="location-column"> 
     <strong><span id="map"></span>Location</strong> 
     <div id="location"> 
    </div> 
</div> 

您會看到很多將dc.js圖表​​使用的其他內容放入div的示例。這對於重置/顯示過濾器控件非常有用，以便圖表可以找到並更改它們。這使佈局混亂。

另一種解決方案可以是使用marginMixin.margins()添加到上邊距：

map.margins({top: 100, left: 0, right: 0, bottom: 0}); // or whatever you need 

這可能是因爲dc.js表現相對於更好到比dc.leaflet.js這些額外的元件沒有，或者其可以只是dc.js具有默認邊距，而dc.leaflet.js zeros them out。

Answer 2

雖然這在結構方面並不是很理想，但我會利用跨度來壓低地圖元素的起點。

<div class="row"> 
    <div class="col-md-12"> 
     <strong><span id="datatable"></span>Media</strong> 
    </div> 
    <div class="col-md-4"> 
     <table class="table table-hover" id="media-table"></table> 
    </div> 
    <div class="col-md-6" id="location"> 
     <strong><span id="map"></span>Location</strong> 
    </div> 
</div>