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)

地图应该与 "filmstrip" 的顶部对齐，它的标题是 "Location"，就像 "Media" 一样。这将允许在每个元素的顶部添加摘要统计信息。

Answer 1

虽然这在结构上不是很理想，但我会利用 span 来下推地图元素的起点。

<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，对吗？

因为这意味着地图没有占据整个 bootstrap 列，我们需要将其放在自己的 child 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 中。它主要用于 reset/display 过滤器控件，以便图表可以找到并更改它们。它使布局混乱。

另一种解决方案可能是使用 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.

CSS 和 Bootstrap 的对齐问题

Alignment issue with CSS and Bootstrap

html

css

leaflet

dc.js

twitter-bootstrap-3