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

尽管就结构而言，这并不是很理想，但我还是会利用跨度来降低map元素的起点。

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

Answer 2

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将其默认为零 。